feat(metrics): query toggle style (#68975)

static/app/components/modals/metricWidgetViewerModal/queries.tsx

@@ -30,7 +30,7 @@ import {
   filterQueriesByDisplayType,
 } from 'sentry/views/dashboards/metrics/utils';
 import {DisplayType} from 'sentry/views/dashboards/types';
-import {EquationSymbol} from 'sentry/views/metrics/equationSymbol copy';
+import {EquationSymbol} from 'sentry/views/metrics/equationSymbol';
 import {FormulaInput} from 'sentry/views/metrics/formulaInput';
 import {getCreateAlert} from 'sentry/views/metrics/metricQueryContextMenu';
 import {QueryBuilder} from 'sentry/views/metrics/queryBuilder';
@@ -90,7 +90,6 @@ export function Queries({
               isHidden={query.isHidden}
               onChange={isHidden => onQueryChange({isHidden}, index)}
               disabled={!query.isHidden && visibleExpressions.length === 1}
-              isSelected={false}
               queryId={query.id}
               type={MetricExpressionType.QUERY}
             />
@@ -116,7 +115,6 @@ export function Queries({
               isHidden={equation.isHidden}
               onChange={isHidden => onEquationChange({isHidden}, index)}
               disabled={!equation.isHidden && visibleExpressions.length === 1}
-              isSelected={false}
               queryId={equation.id}
               type={MetricExpressionType.EQUATION}
             />
@@ -254,37 +252,35 @@ function EquationContextMenu({equationIndex, removeEquation}: EquationContextMen
 interface QueryToggleProps {
   disabled: boolean;
   isHidden: boolean;
-  isSelected: boolean;
   onChange: (isHidden: boolean) => void;
   queryId: number;
   type: MetricExpressionType;
 }
 
-function QueryToggle({
-  isHidden,
-  queryId,
-  disabled,
-  onChange,
-  isSelected,
-  type,
-}: QueryToggleProps) {
-  let tooltipTitle = isHidden ? t('Show query') : t('Hide query');
-  if (disabled) {
-    tooltipTitle = t('At least one query must be visible');
-  }
+function QueryToggle({isHidden, queryId, disabled, onChange, type}: QueryToggleProps) {
+  const tooltipTitle =
+    type === MetricExpressionType.QUERY
+      ? isHidden
+        ? t('Show metric')
+        : t('Hide metric')
+      : isHidden
+        ? t('Show equation')
+        : t('Hide equation');
 
   return (
-    <Tooltip title={tooltipTitle} delay={500}>
+    <Tooltip
+      title={!disabled ? tooltipTitle : t('At least one query must be visible')}
+      delay={500}
+    >
       {type === MetricExpressionType.QUERY ? (
         <StyledQuerySymbol
           isHidden={isHidden}
           queryId={queryId}
           isClickable={!disabled}
           aria-disabled={disabled}
-          isSelected={isSelected}
           onClick={disabled ? undefined : () => onChange(!isHidden)}
           role="button"
-          aria-label={isHidden ? t('Show query') : t('Hide query')}
+          aria-label={tooltipTitle}
         />
       ) : (
         <StyledEquationSymbol
@@ -292,10 +288,9 @@ function QueryToggle({
           equationId={queryId}
           isClickable={!disabled}
           aria-disabled={disabled}
-          isSelected={isSelected}
           onClick={disabled ? undefined : () => onChange(!isHidden)}
           role="button"
-          aria-label={isHidden ? t('Show query') : t('Hide query')}
+          aria-label={tooltipTitle}
         />
       )}
     </Tooltip>
@@ -320,11 +315,9 @@ const QueryWrapper = styled('div')<{hasQuerySymbol: boolean}>`
 `;
 
 const StyledQuerySymbol = styled(QuerySymbol)<{isClickable: boolean}>`
-  margin-top: 10px;
   ${p => p.isClickable && `cursor: pointer;`}
 `;
 const StyledEquationSymbol = styled(EquationSymbol)<{isClickable: boolean}>`
-  margin-top: 10px;
   ${p => p.isClickable && `cursor: pointer;`}
 `;
 

static/app/views/dashboards/metrics/utils.tsx

@@ -18,7 +18,7 @@ import {
   type WidgetQuery,
   WidgetType,
 } from 'sentry/views/dashboards/types';
-import {getEquationSymbol} from 'sentry/views/metrics/equationSymbol copy';
+import {getEquationSymbol} from 'sentry/views/metrics/equationSymbol';
 import {getQuerySymbol} from 'sentry/views/metrics/querySymbol';
 import {getUniqueQueryIdGenerator} from 'sentry/views/metrics/utils/uniqueQueryId';
 

static/app/views/metrics/equationSymbol copy.tsx

@@ -1,56 +0,0 @@
-import {forwardRef} from 'react';
-import styled from '@emotion/styled';
-
-import {space} from 'sentry/styles/space';
-
-const Symbol = styled('span')<{isHidden?: boolean; isSelected?: boolean}>`
-  display: flex;
-  width: 16px;
-  height: 16px;
-  line-height: 16px;
-  padding: ${space(0.5)};
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  border-radius: ${p => p.theme.borderRadius};
-  font-weight: 500;
-  color: ${p => p.theme.black};
-  font-size: 11px;
-  background: ${p => p.theme.yellow300};
-  margin-top: -2px;
-
-  ${p =>
-    p.isSelected &&
-    !p.isHidden &&
-    `
-  background: ${p.theme.purple300};
-  color: ${p.theme.white};
-  `}
-
-  ${p =>
-    p.isHidden &&
-    `
-  background: ${p.theme.gray300};
-  color: ${p.theme.white};
-  `}
-`;
-
-interface EquationSymbolProps extends React.ComponentProps<typeof Symbol> {
-  equationId: number;
-}
-
-export function getEquationSymbol(equationId: number) {
-  return `ƒ${equationId + 1}`;
-}
-
-export const EquationSymbol = forwardRef<HTMLSpanElement, EquationSymbolProps>(
-  function EquationSymbol({equationId, ...props}, ref) {
-    return (
-      <Symbol ref={ref} {...props}>
-        <span>
-          ƒ<sub>{equationId + 1}</sub>
-        </span>
-      </Symbol>
-    );
-  }
-);

static/app/views/metrics/equationSymbol.tsx

@@ -0,0 +1,23 @@
+import {forwardRef} from 'react';
+
+import {Symbol} from './querySymbol';
+
+interface EquationSymbolProps extends React.ComponentProps<typeof Symbol> {
+  equationId: number;
+}
+
+export function getEquationSymbol(equationId: number) {
+  return `ƒ${equationId + 1}`;
+}
+
+export const EquationSymbol = forwardRef<HTMLSpanElement, EquationSymbolProps>(
+  function EquationSymbol({equationId, ...props}, ref) {
+    return (
+      <Symbol ref={ref} {...props}>
+        <span>
+          ƒ<sub>{equationId + 1}</sub>
+        </span>
+      </Symbol>
+    );
+  }
+);

static/app/views/metrics/pageHeaderActions.tsx

@@ -37,14 +37,8 @@ export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Pro
   const router = useRouter();
   const organization = useOrganization();
   const formulaDependencies = useFormulaDependencies();
-  const {
-    isDefaultQuery,
-    setDefaultQuery,
-    widgets,
-    showQuerySymbols,
-    selectedWidgetIndex,
-    isMultiChartMode,
-  } = useMetricsContext();
+  const {isDefaultQuery, setDefaultQuery, widgets, showQuerySymbols, isMultiChartMode} =
+    useMetricsContext();
   const createDashboard = useCreateDashboard(
     widgets,
     formulaDependencies,
@@ -127,7 +121,6 @@ export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Pro
                     key="icon"
                     queryId={widget.id}
                     isHidden={widget.isHidden}
-                    isSelected={index === selectedWidgetIndex && isMultiChartMode}
                   />,
                 ]
               : [],
@@ -148,7 +141,7 @@ export function PageHeaderActions({showCustomMetricButton, addCustomMetric}: Pro
             },
           };
         }),
-    [isMultiChartMode, organization, selectedWidgetIndex, showQuerySymbols, widgets]
+    [organization, showQuerySymbols, widgets]
   );
 
   return (

static/app/views/metrics/queries.tsx

@@ -21,7 +21,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {DDM_CHART_GROUP} from 'sentry/views/metrics/constants';
 import {useMetricsContext} from 'sentry/views/metrics/context';
-import {EquationSymbol} from 'sentry/views/metrics/equationSymbol copy';
+import {EquationSymbol} from 'sentry/views/metrics/equationSymbol';
 import {FormulaInput} from 'sentry/views/metrics/formulaInput';
 import {MetricFormulaContextMenu} from 'sentry/views/metrics/metricFormulaContextMenu';
 import {MetricQueryContextMenu} from 'sentry/views/metrics/metricQueryContextMenu';
@@ -296,31 +296,30 @@ interface QueryToggleProps {
   type: MetricExpressionType;
 }
 
-function QueryToggle({
-  isHidden,
-  queryId,
-  disabled,
-  onChange,
-  isSelected,
-  type,
-}: QueryToggleProps) {
-  let tooltipTitle = isHidden ? t('Show query') : t('Hide query');
-  if (disabled) {
-    tooltipTitle = t('At least one query must be visible');
-  }
+function QueryToggle({isHidden, queryId, disabled, onChange, type}: QueryToggleProps) {
+  const tooltipTitle =
+    type === MetricExpressionType.QUERY
+      ? isHidden
+        ? t('Show metric')
+        : t('Hide metric')
+      : isHidden
+        ? t('Show equation')
+        : t('Hide equation');
 
   return (
-    <Tooltip title={tooltipTitle} delay={500}>
+    <Tooltip
+      title={!disabled ? tooltipTitle : t('At least one query must be visible')}
+      delay={500}
+    >
       {type === MetricExpressionType.QUERY ? (
         <StyledQuerySymbol
           isHidden={isHidden}
           queryId={queryId}
           isClickable={!disabled}
           aria-disabled={disabled}
-          isSelected={isSelected}
           onClick={disabled ? undefined : () => onChange(!isHidden)}
           role="button"
-          aria-label={isHidden ? t('Show query') : t('Hide query')}
+          aria-label={tooltipTitle}
         />
       ) : (
         <StyledEquationSymbol
@@ -328,10 +327,9 @@ function QueryToggle({
           equationId={queryId}
           isClickable={!disabled}
           aria-disabled={disabled}
-          isSelected={isSelected}
           onClick={disabled ? undefined : () => onChange(!isHidden)}
           role="button"
-          aria-label={isHidden ? t('Show query') : t('Hide query')}
+          aria-label={tooltipTitle}
         />
       )}
     </Tooltip>
@@ -347,13 +345,11 @@ const QueryWrapper = styled('div')<{hasSymbol: boolean}>`
 `;
 
 const StyledQuerySymbol = styled(QuerySymbol)<{isClickable: boolean}>`
-  margin-top: 10px;
   cursor: not-allowed;
   ${p => p.isClickable && `cursor: pointer;`}
 `;
 
 const StyledEquationSymbol = styled(EquationSymbol)<{isClickable: boolean}>`
-  margin-top: 10px;
   cursor: not-allowed;
   ${p => p.isClickable && `cursor: pointer;`}
 `;

static/app/views/metrics/querySymbol.tsx

@@ -15,34 +15,27 @@ export const getQuerySymbol = (index: number) => {
   return result;
 };
 
-const Symbol = styled('span')<{isHidden?: boolean; isSelected?: boolean}>`
+export const Symbol = styled('span')<{isHidden?: boolean}>`
   display: flex;
-  width: 16px;
-  height: 16px;
+  width: 38px;
+  height: 38px;
   line-height: 16px;
   padding: ${space(0.5)};
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
-  border-radius: 50%;
+  border-radius: ${p => p.theme.borderRadius};
   font-weight: 500;
-  color: ${p => p.theme.black};
-  font-size: 11px;
-  background: ${p => p.theme.yellow300};
-
-  ${p =>
-    p.isSelected &&
-    !p.isHidden &&
-    `
-  background: ${p.theme.purple300};
-  color: ${p.theme.white};
-  `}
+  color: ${p => p.theme.white};
+  font-size: 14px;
+  background: ${p => p.theme.purple300};
 
   ${p =>
     p.isHidden &&
     `
-  background: ${p.theme.gray300};
-  color: ${p.theme.white};
+  background: ${p.theme.background};
+  color: ${p.theme.textColor};
+  border: 1px solid ${p.theme.border};
   `}
 `;
 

static/app/views/metrics/utils/widgetToQuery.tsx

@@ -1,6 +1,6 @@
 import {isMetricsEquationWidget, type MetricsWidget} from 'sentry/utils/metrics/types';
 import type {MetricsQueryApiQueryParams} from 'sentry/utils/metrics/useMetricsQuery';
-import {getEquationSymbol} from 'sentry/views/metrics/equationSymbol copy';
+import {getEquationSymbol} from 'sentry/views/metrics/equationSymbol';
 import {getQuerySymbol} from 'sentry/views/metrics/querySymbol';
 
 export function widgetToQuery(

static/app/views/metrics/widget.tsx

@@ -54,9 +54,7 @@ import type {Series} from 'sentry/views/metrics/chart/types';
 import {useFocusArea} from 'sentry/views/metrics/chart/useFocusArea';
 import {useMetricChartSamples} from 'sentry/views/metrics/chart/useMetricChartSamples';
 import type {FocusAreaProps} from 'sentry/views/metrics/context';
-import {EquationSymbol} from 'sentry/views/metrics/equationSymbol copy';
 import {FormularFormatter} from 'sentry/views/metrics/formulaParser/formatter';
-import {QuerySymbol} from 'sentry/views/metrics/querySymbol';
 import {SummaryTable} from 'sentry/views/metrics/summaryTable';
 import {useSeriesHover} from 'sentry/views/metrics/useSeriesHover';
 import {updateQueryWithSeriesFilter} from 'sentry/views/metrics/utils';
@@ -192,16 +190,9 @@ export const MetricWidget = memo(
       >
         <PanelBody>
           <MetricWidgetHeader>
-            {showQuerySymbols &&
-              queryId !== undefined &&
-              (queries[0] && isMetricFormula(queries[0]) ? (
-                <EquationSymbol
-                  equationId={queryId}
-                  isSelected={isSelected && hasSiblings}
-                />
-              ) : (
-                <QuerySymbol queryId={queryId} isSelected={isSelected && hasSiblings} />
-              ))}
+            {showQuerySymbols && queryId !== undefined && queries[0] && (
+              <span>{queries[0].name}:</span>
+            )}
             <WidgetTitle>
               <StyledTooltip
                 title={widgetTitle}
@@ -637,7 +628,7 @@ const MetricWidgetHeader = styled('div')`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: ${space(1)};
+  gap: ${space(0.5)};
   padding-left: ${space(2)};
   padding-top: ${space(1.5)};
   padding-right: ${space(2)};