feat(insights): Hide healthy Session Health counts & rates by default (#87252)

This PR re-labels the charts and series so that the series names are
shorter, less redundant. As a consequence the chart titles are longer
again.

The charts also hide the "healthy" series of data by default, users can
click the legend to toggle that series though.

Toggling a series in one chart will affect all charts when the series
name is the same. All the names are consistent now between all the
charts.


![SCR-20250318-lzex](https://github.com/user-attachments/assets/adf6a0b6-5da0-41d0-8b3b-e2109fe8e664)

Author: ryan953

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

@@ -25,7 +25,7 @@ export class Line extends ContinuousTimeSeries implements Plottable {
 
     const plottableSeries: LineSeriesOption[] = [];
 
-    const commonOptions = {
+    const commonOptions: LineSeriesOption = {
       name: this.label,
       color,
       animation: false,

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

@@ -471,7 +471,7 @@ export default storyBook('TimeSeriesWidgetVisualization', (story, APIReference)
 
   story('Legends', () => {
     const [legendSelection, setLegendSelection] = useState<LegendSelection>({
-      'p99(span.duration)': false,
+      p99: false,
     });
 
     return (
@@ -496,6 +496,8 @@ export default storyBook('TimeSeriesWidgetVisualization', (story, APIReference)
           default.
         </p>
 
+        <code>{JSON.stringify(legendSelection)}</code>
+
         <MediumWidget>
           <TimeSeriesWidgetVisualization
             plottables={[

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

@@ -9,6 +9,7 @@ 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 {LegendSelection} 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';
@@ -38,6 +39,8 @@ export interface InsightsTimeSeriesWidgetProps {
   visualizationType: 'line' | 'area' | 'bar';
   aliases?: Record<string, string>;
   description?: React.ReactNode;
+  legendSelection?: LegendSelection | undefined;
+  onLegendSelectionChange?: ((selection: LegendSelection) => void) | undefined;
   stacked?: boolean;
 }
 
@@ -115,6 +118,8 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
             {...(organization.features.includes('release-bubbles-ui')
               ? {releases, showReleaseAs: 'bubble'}
               : {})}
+            legendSelection={props.legendSelection}
+            onLegendSelectionChange={props.onLegendSelectionChange}
             {...visualizationProps}
           />
         }
@@ -135,6 +140,8 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
                     <ModalChartContainer>
                       <TimeSeriesWidgetVisualization
                         {...visualizationProps}
+                        legendSelection={props.legendSelection}
+                        onLegendSelectionChange={props.onLegendSelectionChange}
                         releases={releases ?? []}
                       />
                     </ModalChartContainer>

static/app/views/insights/sessions/charts/errorFreeSessionsChart.tsx

@@ -7,7 +7,7 @@ export default function ErrorFreeSessionsChart() {
   const {series, isPending, error} = useErrorFreeSessions();
 
   const aliases = {
-    successful_session_rate: t('Error free session rate'),
+    successful_session_rate: t('crash_free_rate(session)'),
   };
 
   return (

static/app/views/insights/sessions/charts/sessionHealthCountChart.tsx

@@ -1,27 +1,21 @@
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
-import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
 import useSessionHealthBreakdown from 'sentry/views/insights/sessions/queries/useSessionHealthBreakdown';
 
-export default function SessionHealthCountChart({view}: {view: string}) {
+export default function SessionHealthCountChart() {
   const {series, isPending, error} = useSessionHealthBreakdown({type: 'count'});
-  const frontendPath = view === FRONTEND_LANDING_SUB_PATH;
 
   const aliases = {
-    healthy_session_count: t('Healthy session count'),
-    crashed_session_count: frontendPath
-      ? t('Unhandled error session count')
-      : t('Crashed session count'),
-    errored_session_count: frontendPath
-      ? t('Handled error session count')
-      : t('Errored session count'),
-    abnormal_session_count: t('Abnormal session count'),
+    healthy_session_count: 'count_healthy(session)',
+    crashed_session_count: 'count_crashed(session)',
+    errored_session_count: 'count_errored(session)',
+    abnormal_session_count: 'count_abnormal(session)',
   };
 
   return (
     <InsightsLineChartWidget
-      title={t('Sessions')}
+      title={t('Session Counts')}
       description={tct(
         'The count of sessions with each health status. See [link:session status].',
         {
@@ -34,6 +28,9 @@ export default function SessionHealthCountChart({view}: {view: string}) {
       series={series}
       isLoading={isPending}
       error={error}
+      legendSelection={{
+        [aliases.healthy_session_count]: false,
+      }}
     />
   );
 }

static/app/views/insights/sessions/charts/sessionHealthRateChart.tsx

@@ -1,22 +1,16 @@
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsAreaChartWidget} from 'sentry/views/insights/common/components/insightsAreaChartWidget';
-import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
 import useSessionHealthBreakdown from 'sentry/views/insights/sessions/queries/useSessionHealthBreakdown';
 
-export default function SessionHealthRateChart({view}: {view: string}) {
+export default function SessionHealthRateChart() {
   const {series, isPending, error} = useSessionHealthBreakdown({type: 'rate'});
-  const frontendPath = view === FRONTEND_LANDING_SUB_PATH;
 
   const aliases = {
-    healthy_session_rate: t('Healthy session rate'),
-    crashed_session_rate: frontendPath
-      ? t('Unhandled error session rate')
-      : t('Crashed session rate'),
-    errored_session_rate: frontendPath
-      ? t('Handled error session rate')
-      : t('Errored session rate'),
-    abnormal_session_rate: t('Abnormal session rate'),
+    healthy_session_rate: 'rate_healthy(session)',
+    crashed_session_rate: 'rate_crashed(session)',
+    errored_session_rate: 'rate_errored(session)',
+    abnormal_session_rate: 'rate_abnormal(session)',
   };
 
   return (
@@ -34,6 +28,9 @@ export default function SessionHealthRateChart({view}: {view: string}) {
       series={series}
       isLoading={isPending}
       error={error}
+      legendSelection={{
+        [aliases.healthy_session_rate]: false,
+      }}
     />
   );
 }

static/app/views/insights/sessions/charts/userHealthCountChart.tsx

@@ -1,29 +1,21 @@
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
-import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
 import useUserHealthBreakdown from 'sentry/views/insights/sessions/queries/useUserHealthBreakdown';
 
-export default function UserHealthCountChart({view}: {view: string}) {
-  const {series, isPending, error} = useUserHealthBreakdown({
-    type: 'count',
-  });
-  const frontendPath = view === FRONTEND_LANDING_SUB_PATH;
+export default function UserHealthCountChart() {
+  const {series, isPending, error} = useUserHealthBreakdown({type: 'count'});
 
   const aliases = {
-    healthy_user_count: t('Healthy user count'),
-    crashed_user_count: frontendPath
-      ? t('Unhandled error user count')
-      : t('Crashed user count'),
-    errored_user_count: frontendPath
-      ? t('Handled error user count')
-      : t('Errored user count'),
-    abnormal_user_count: t('Abnormal user count'),
+    healthy_user_count: 'count_healthy(user)',
+    crashed_user_count: 'count_crashed(user)',
+    errored_user_count: 'count_errored(user)',
+    abnormal_user_count: 'count_abnormal(user)',
   };
 
   return (
     <InsightsLineChartWidget
-      title={t('Users')}
+      title={t('User Counts')}
       description={tct(
         'Breakdown of total [linkUsers:users], grouped by [linkStatus:health status].',
         {
@@ -39,6 +31,9 @@ export default function UserHealthCountChart({view}: {view: string}) {
       series={series}
       isLoading={isPending}
       error={error}
+      legendSelection={{
+        [aliases.healthy_user_count]: false,
+      }}
     />
   );
 }

static/app/views/insights/sessions/charts/userHealthRateChart.tsx

@@ -1,24 +1,16 @@
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import {InsightsAreaChartWidget} from 'sentry/views/insights/common/components/insightsAreaChartWidget';
-import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
 import useUserHealthBreakdown from 'sentry/views/insights/sessions/queries/useUserHealthBreakdown';
 
-export default function UserHealthRateChart({view}: {view: string}) {
-  const {series, isPending, error} = useUserHealthBreakdown({
-    type: 'rate',
-  });
-  const frontendPath = view === FRONTEND_LANDING_SUB_PATH;
+export default function UserHealthRateChart() {
+  const {series, isPending, error} = useUserHealthBreakdown({type: 'rate'});
 
   const aliases = {
-    healthy_user_rate: t('Healthy user rate'),
-    crashed_user_rate: frontendPath
-      ? t('Unhandled error user rate')
-      : t('Crashed user rate'),
-    errored_user_rate: frontendPath
-      ? t('Handled error user rate')
-      : t('Errored user rate'),
-    abnormal_user_rate: t('Abnormal user rate'),
+    healthy_user_rate: 'rate_healthy(user)',
+    crashed_user_rate: 'rate_crashed(user)',
+    errored_user_rate: 'rate_errored(user)',
+    abnormal_user_rate: 'rate_abnormal(user)',
   };
 
   return (
@@ -39,6 +31,9 @@ export default function UserHealthRateChart({view}: {view: string}) {
       series={series}
       isLoading={isPending}
       error={error}
+      legendSelection={{
+        [aliases.healthy_user_rate]: false,
+      }}
     />
   );
 }

static/app/views/insights/sessions/views/overview.tsx

@@ -54,17 +54,17 @@ export function SessionsOverview() {
         </ModuleLayout.Third>
       ) : undefined}
       <ModuleLayout.Third>
-        <SessionHealthCountChart view={view} />
+        <SessionHealthCountChart />
       </ModuleLayout.Third>
       <ModuleLayout.Third>
-        <UserHealthCountChart view={view} />
+        <UserHealthCountChart />
       </ModuleLayout.Third>
       <ModuleLayout.Third />
       <ModuleLayout.Third>
-        <SessionHealthRateChart view={view} />
+        <SessionHealthRateChart />
       </ModuleLayout.Third>
       <ModuleLayout.Third>
-        <UserHealthRateChart view={view} />
+        <UserHealthRateChart />
       </ModuleLayout.Third>
     </Fragment>
   );