ref(dashboards): Set aliases per plottable in TimeSeriesWidgetVisualization (#87023)

We allow plottables to have aliases. e.g.,

```jsx
const timeSeries = {
  field: 'failure_rate_5()',
  ...

<TimeSeriesWidgetVisualization
  plottables={[
    new Line(timeSeries)
  ]}
  aliases={{'failure_rate_5()': '5XX'}}
/>
```

That makes it easy to set nice aliases for long series names in charts.
This is not a great API for a few reasons:

1. Aliases have to be constructed ahead of time. Sometimes this is easy,
sometime it's annoying, if you're calculating aliases as the same time
as constructing the plottables
2. This won't work well in the near future. Right now we're passing
around objects with properties like `field: "/insights,prod : eps()"`
which is impractical. We're going to break that stuff up
3. This works like crap for charts that have different series with the
same `field`, like if you're showing different `avg(span.duration)` from
different queries, for example

This PR changes the API, and now every plottable can specify its alias,
which is much more explicit!

e.g.,

```jsx
const timeSeries = {
  field: 'failure_rate_5()',
  ...

<TimeSeriesWidgetVisualization
  plottables={[
    new Line(timeSeries, {alias: '5XX'})
  ]}
/>
```

Each plottable has a `label` property that either returns the alias, or
computes a default value if needed. It sets the label directly on the
output `Series` so we don't have to do any additional processing at
tooltip time 👍🏻

N.B. `InsightsTimeSeriesWidget` still accepts `aliases` and then passes
them along to the right plottable. That's just for convenience in that
case, I'll be gradually thinning that component out.

Author: gggritso

static/app/views/dashboards/widgets/common/types.tsx

@@ -42,6 +42,4 @@ export type Release = {
   version: string;
 };
 
-export type Aliases = Record<string, string>;
-
 export type LegendSelection = {[key: string]: boolean};

static/app/views/dashboards/widgets/timeSeriesWidget/plottables/area.tsx

@@ -15,7 +15,7 @@ export class Area extends ContinuousTimeSeries implements Plottable {
     return new Area(this.constrainTimeSeries(boundaryStart, boundaryEnd), this.config);
   }
   toSeries(plottingOptions: ContinuousTimeSeriesPlottingOptions): LineSeriesOption[] {
-    const {timeSeries, config = {}} = this;
+    const {config = {}} = this;
 
     const color = plottingOptions.color ?? config.color ?? undefined;
     const scaledSeries = this.scaleToUnit(plottingOptions.unit);
@@ -26,7 +26,7 @@ export class Area extends ContinuousTimeSeries implements Plottable {
     const plottableSeries: LineSeriesOption[] = [];
 
     const commonOptions = {
-      name: timeSeries.field,
+      name: this.label,
       color,
       animation: false,
       yAxisIndex: plottingOptions.yAxisPosition === 'left' ? 0 : 1,

static/app/views/dashboards/widgets/timeSeriesWidget/plottables/bars.tsx

@@ -26,7 +26,7 @@ export class Bars extends ContinuousTimeSeries<BarsConfig> implements Plottable
   toSeries(
     plottingOptions: ContinuousTimeSeriesPlottingOptions
   ): Array<BarSeriesOption | LineSeriesOption> {
-    const {timeSeries, config = {}} = this;
+    const {config = {}} = this;
 
     const color = plottingOptions.color ?? config.color ?? undefined;
     const scaledTimeSeries = this.scaleToUnit(plottingOptions.unit);
@@ -35,7 +35,7 @@ export class Bars extends ContinuousTimeSeries<BarsConfig> implements Plottable
 
     return [
       BarSeries({
-        name: timeSeries.field,
+        name: this.label,
         stack: config.stack,
         yAxisIndex: plottingOptions.yAxisPosition === 'left' ? 0 : 1,
         color,

static/app/views/dashboards/widgets/timeSeriesWidget/plottables/continuousTimeSeries.tsx

@@ -4,8 +4,13 @@ import type {AggregationOutputType, DataUnit} from 'sentry/utils/discover/fields
 import {scaleTimeSeriesData} from 'sentry/utils/timeSeries/scaleTimeSeriesData';
 
 import type {TimeSeries} from '../../common/types';
+import {formatSeriesName} from '../formatters/formatSeriesName';
 
 export type ContinuousTimeSeriesConfig = {
+  /**
+   * Optional alias. If not provided, the series name from the legend will be computed from the `TimeSeries`.
+   */
+  alias?: string;
   /**
    * Optional color. If not provided, a backfill from a common palette will be provided to `toSeries`
    */
@@ -48,6 +53,10 @@ export abstract class ContinuousTimeSeries<
     this.config = config;
   }
 
+  get label(): string {
+    return this.config?.alias ?? formatSeriesName(this.timeSeries.field);
+  }
+
   get isEmpty(): boolean {
     return this.timeSeries.data.every(datum => datum.value === null);
   }

static/app/views/dashboards/widgets/timeSeriesWidget/plottables/line.tsx

@@ -15,7 +15,7 @@ export class Line extends ContinuousTimeSeries implements Plottable {
     return new Line(this.constrainTimeSeries(boundaryStart, boundaryEnd), this.config);
   }
   toSeries(plottingOptions: ContinuousTimeSeriesPlottingOptions) {
-    const {timeSeries, config = {}} = this;
+    const {config = {}} = this;
 
     const color = plottingOptions.color ?? config.color ?? undefined;
     const scaledSeries = this.scaleToUnit(plottingOptions.unit);
@@ -26,7 +26,7 @@ export class Line extends ContinuousTimeSeries implements Plottable {
     const plottableSeries: LineSeriesOption[] = [];
 
     const commonOptions = {
-      name: timeSeries.field,
+      name: this.label,
       color,
       animation: false,
       yAxisIndex: plottingOptions.yAxisPosition === 'left' ? 0 : 1,

static/app/views/dashboards/widgets/timeSeriesWidget/plottables/plottable.tsx

@@ -35,10 +35,13 @@ export interface Plottable {
    * Start timestamp of the plottable, if applicable
    */
   start: string | null;
-
   /**
    *
    * @param plottingOptions Plotting options depend on the specific implementation of the interface.
    */
   toSeries(plottingOptions: unknown): SeriesOption[];
+  /**
+   * Optional label for this plottable, if it appears in the legend and in tooltips.
+   */
+  label?: string;
 }

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.stories.tsx

@@ -490,21 +490,18 @@ export default storyBook('TimeSeriesWidgetVisualization', (story, APIReference)
           the user changes the legend selection by clicking on legend labels.
         </p>
         <p>
-          You can also provide aliases for legends to give them a friendlier name. In this
-          example, verbose names like "p99(span.duration)" are truncated, and the p99
-          series is hidden by default.
+          You can also provide aliases for plottables like <code>Line</code> This will
+          give the legends and tooltips a friendlier name. In this example, verbose names
+          like "p99(span.duration)" are truncated, and the p99 series is hidden by
+          default.
         </p>
 
         <MediumWidget>
           <TimeSeriesWidgetVisualization
             plottables={[
-              new Area(sampleDurationTimeSeries, {}),
-              new Area(sampleDurationTimeSeries2, {}),
+              new Area(sampleDurationTimeSeries, {alias: 'p50'}),
+              new Area(sampleDurationTimeSeries2, {alias: 'p99'}),
             ]}
-            aliases={{
-              'p99(span.duration)': 'p99',
-              'p50(span.duration)': 'p50',
-            }}
             legendSelection={legendSelection}
             onLegendSelectionChange={setLegendSelection}
           />

static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx

@@ -31,9 +31,8 @@ import {makeReleasesPathname} from 'sentry/views/releases/utils/pathnames';
 
 import {useWidgetSyncContext} from '../../contexts/widgetSyncContext';
 import {NO_PLOTTABLE_VALUES, X_GUTTER, Y_GUTTER} from '../common/settings';
-import type {Aliases, LegendSelection, Release} from '../common/types';
+import type {LegendSelection, Release} from '../common/types';
 
-import {formatSeriesName} from './formatters/formatSeriesName';
 import {formatTooltipValue} from './formatters/formatTooltipValue';
 import {formatXAxisTimestamp} from './formatters/formatXAxisTimestamp';
 import {formatYAxisValue} from './formatters/formatYAxisValue';
@@ -50,9 +49,6 @@ export interface TimeSeriesWidgetVisualizationProps {
    */
   plottables: Plottable[];
   /**
-   * A mapping of time series fields to their user-friendly labels, if needed
-   */
-  aliases?: Aliases;
   /**
    * Disables navigating to release details when clicked
    * TODO(billy): temporary until we implement route based nav
@@ -350,9 +346,6 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
 
         return formatTooltipValue(value, fieldType, unitForType[fieldType] ?? undefined);
       },
-      nameFormatter: seriesName => {
-        return props.aliases?.[seriesName] ?? formatSeriesName(seriesName);
-      },
       truncate: true,
       utc: utc ?? false,
     })(deDupedParams, asyncTicket);
@@ -459,7 +452,7 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
               left: 0,
               formatter(seriesName: string) {
                 return truncationFormatter(
-                  props.aliases?.[seriesName] ?? formatSeriesName(seriesName),
+                  seriesName,
                   true,
                   // Escaping the legend string will cause some special
                   // characters to render as their HTML equivalents.

static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx

@@ -9,7 +9,6 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useReleaseStats} from 'sentry/utils/useReleaseStats';
 import {MISSING_DATA_MESSAGE} from 'sentry/views/dashboards/widgets/common/settings';
-import type {Aliases} from 'sentry/views/dashboards/widgets/common/types';
 import {Area} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/area';
 import {Bars} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/bars';
 import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/line';
@@ -37,7 +36,7 @@ export interface InsightsTimeSeriesWidgetProps {
   series: DiscoverSeries[];
   title: string;
   visualizationType: 'line' | 'area' | 'bar';
-  aliases?: Aliases;
+  aliases?: Record<string, string>;
   description?: React.ReactNode;
   stacked?: boolean;
 }
@@ -66,9 +65,9 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
         color: serie.color ?? COMMON_COLORS[timeSeries.field],
         delay: INGESTION_DELAY,
         stack: props.stacked && props.visualizationType === 'bar' ? 'all' : undefined,
+        alias: props.aliases?.[timeSeries.field],
       });
     }),
-    aliases: props.aliases,
   };
 
   const Title = <Widget.WidgetTitle title={props.title} />;

static/app/views/insights/pages/backend/laravel/jobsWidget.tsx

@@ -107,7 +107,12 @@ export function JobsWidget({query}: {query?: string}) {
 
   const plottables = useMemo(() => {
     return timeSeries.map(
-      ts => new Bars(convertSeriesToTimeseries(ts), {color: ts.color, stack: 'stack'})
+      ts =>
+        new Bars(convertSeriesToTimeseries(ts), {
+          color: ts.color,
+          stack: 'stack',
+          alias: seriesAliases[ts.seriesName as 'ok' | 'internal_error'],
+        })
     );
   }, [timeSeries]);
 
@@ -120,7 +125,6 @@ export function JobsWidget({query}: {query?: string}) {
       isEmpty={isEmpty}
       VisualizationType={TimeSeriesWidgetVisualization}
       visualizationProps={{
-        aliases: seriesAliases,
         plottables,
       }}
     />

static/app/views/insights/pages/backend/laravel/queriesWidget.tsx

@@ -135,6 +135,13 @@ export function QueriesWidget({query}: {query?: string}) {
 
   const colorPalette = getChartColorPalette(timeSeries.length - 2);
 
+  const aliases = Object.fromEntries(
+    queriesRequest.data?.data.map(item => [
+      getSeriesName(item),
+      item['sentry.normalized_description'],
+    ]) ?? []
+  );
+
   const visualization = (
     <WidgetVisualizationStates
       isEmpty={!hasData}
@@ -143,15 +150,12 @@ export function QueriesWidget({query}: {query?: string}) {
       emptyMessage={<TimeSpentInDatabaseWidgetEmptyStateWarning />}
       VisualizationType={TimeSeriesWidgetVisualization}
       visualizationProps={{
-        aliases: Object.fromEntries(
-          queriesRequest.data?.data.map(item => [
-            getSeriesName(item),
-            item['sentry.normalized_description'],
-          ]) ?? []
-        ),
         plottables: timeSeries.map(
           (ts, index) =>
-            new Line(convertSeriesToTimeseries(ts), {color: colorPalette[index]})
+            new Line(convertSeriesToTimeseries(ts), {
+              color: colorPalette[index],
+              alias: aliases[ts.seriesName],
+            })
         ),
       }}
     />