feat(starfish): update app breakdown chart to match mocks (#50307)

static/app/components/checkbox.tsx

@@ -8,6 +8,10 @@ import {FormSize} from 'sentry/utils/theme';
 type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 interface Props extends Omit<CheckboxProps, 'checked' | 'size'> {
+  /**
+   * The background color of the filled in checkbox.
+   */
+  checkboxColor?: string;
   /**
    * Is the checkbox active? Supports 'indeterminate'
    */
@@ -16,6 +20,7 @@ interface Props extends Omit<CheckboxProps, 'checked' | 'size'> {
    * Styles to be applied to the hidden <input> element.
    */
   inputCss?: Interpolation<Theme>;
+
   /**
    * The size of the checkbox. Defaults to 'sm'.
    */
@@ -34,7 +39,14 @@ const checkboxSizeMap: Record<FormSize, CheckboxConfig> = {
   md: {box: '22px', borderRadius: '6px', icon: '18px'},
 };
 
-function Checkbox({className, inputCss, checked = false, size = 'sm', ...props}: Props) {
+function Checkbox({
+  checkboxColor,
+  className,
+  inputCss,
+  checked = false,
+  size = 'sm',
+  ...props
+}: Props) {
   const checkboxRef = useRef<HTMLInputElement>(null);
 
   // Support setting the indeterminate value, which is only possible through
@@ -55,7 +67,7 @@ function Checkbox({className, inputCss, checked = false, size = 'sm', ...props}:
         {...props}
       />
 
-      <StyledCheckbox aria-hidden checked={checked} size={size}>
+      <StyledCheckbox aria-hidden checked={checked} size={size} color={checkboxColor}>
         {checked === true && (
           <VariableWeightIcon viewBox="0 0 16 16" size={checkboxSizeMap[size].icon}>
             <path d="M2.86 9.14C4.42 10.7 6.9 13.14 6.86 13.14L12.57 3.43" />
@@ -124,6 +136,7 @@ const HiddenInput = styled('input')`
 const StyledCheckbox = styled('div')<{
   checked: Props['checked'];
   size: FormSize;
+  color?: Props['checkboxColor'];
 }>`
   position: relative;
   display: flex;
@@ -139,7 +152,7 @@ const StyledCheckbox = styled('div')<{
   ${p =>
     p.checked
       ? css`
-          background: ${p.theme.active};
+          background: ${p.color ?? p.theme.active};
           border: 0;
         `
       : css`

static/app/views/starfish/colours.tsx

@@ -1,6 +1,13 @@
 import {CHART_PALETTE} from 'sentry/constants/chartPalette';
+import {ModuleName} from 'sentry/views/starfish/types';
 
 export const THROUGHPUT_COLOR = CHART_PALETTE[0][0];
 export const P50_COLOR = CHART_PALETTE[2][2];
 export const P95_COLOR = CHART_PALETTE[2][1];
 export const ERRORS_COLOR = CHART_PALETTE[2][2];
+export const MODULE_COLOR: Record<ModuleName, string> = {
+  [ModuleName.HTTP]: CHART_PALETTE[3][3],
+  [ModuleName.DB]: CHART_PALETTE[3][2],
+  [ModuleName.NONE]: CHART_PALETTE[3][1],
+  [ModuleName.ALL]: CHART_PALETTE[3][0],
+};

static/app/views/starfish/views/webServiceView/spanGroupBreakdown.tsx

@@ -1,13 +1,12 @@
-import {Fragment, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {Link} from 'react-router';
 import styled from '@emotion/styled';
 import * as qs from 'query-string';
 
 import Checkbox from 'sentry/components/checkbox';
-import Duration from 'sentry/components/duration';
 import TextOverflow from 'sentry/components/textOverflow';
 import {Tooltip} from 'sentry/components/tooltip';
-import {t, tct} from 'sentry/locale';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Series} from 'sentry/types/echarts';
 import {getUtcDateString} from 'sentry/utils/dates';
@@ -15,9 +14,10 @@ import {tooltipFormatterUsingAggregateOutputType} from 'sentry/utils/discover/ch
 import {NumberContainer} from 'sentry/utils/discover/styles';
 import {formatPercentage} from 'sentry/utils/formatters';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import TopResultsIndicator from 'sentry/views/discover/table/topResultsIndicator';
 import {RightAlignedCell} from 'sentry/views/performance/landing/widgets/components/selectableList';
+import {MODULE_COLOR} from 'sentry/views/starfish/colours';
 import Chart from 'sentry/views/starfish/components/chart';
+import {ModuleName} from 'sentry/views/starfish/types';
 import {DataRow} from 'sentry/views/starfish/views/webServiceView/spanGroupBreakdownContainer';
 
 type Props = {
@@ -52,7 +52,7 @@ export function SpanGroupBreakdown({
   }
 
   return (
-    <Fragment>
+    <FlexRowContainer>
       <ChartPadding>
         <Header>
           <ChartLabel>{t('App Time Breakdown (p95)')}</ChartLabel>
@@ -99,15 +99,14 @@ export function SpanGroupBreakdown({
             group['span.module'] === 'other'
               ? `/starfish/spans/`
               : `/starfish/spans/?${qs.stringify(spansLinkQueryParams)}`;
+          const module = group['span.module'] as ModuleName;
           return (
             <StyledLineItem key={`${group['span.module']}`}>
               <ListItemContainer>
-                <StyledTopResultsIndicator
-                  count={Math.max(transformedData.length - 1, 1)}
-                  index={index}
-                />
                 <Checkbox
                   size="sm"
+                  checkboxColor={MODULE_COLOR[module]}
+                  inputCss={{backgroundColor: 'red'}}
                   checked={checkedValue}
                   onChange={() => {
                     const updatedSeries = [...showSeriesArray];
@@ -130,20 +129,10 @@ export function SpanGroupBreakdown({
                     containerDisplayMode="block"
                     position="top"
                   >
-                    <NumberContainer>
-                      {tct('[cumulativeTime] ([cumulativeTimePercentage])', {
-                        cumulativeTime: (
-                          <Duration
-                            seconds={row.cumulativeTime / 1000}
-                            fixedDigits={1}
-                            abbreviation
-                          />
-                        ),
-                        cumulativeTimePercentage: formatPercentage(
-                          row.cumulativeTime / totalValues,
-                          1
-                        ),
-                      })}
+                    <NumberContainer
+                      style={{textDecoration: 'underline', textDecorationStyle: 'dotted'}}
+                    >
+                      {formatPercentage(row.cumulativeTime / totalValues, 1)}
                     </NumberContainer>
                   </Tooltip>
                 </RightAlignedCell>
@@ -152,7 +141,7 @@ export function SpanGroupBreakdown({
           );
         })}
       </ListContainer>
-    </Fragment>
+    </FlexRowContainer>
   );
 }
 
@@ -162,7 +151,6 @@ const StyledLineItem = styled('li')`
 
 const ListItemContainer = styled('div')`
   display: flex;
-  border-top: 1px solid ${p => p.theme.border};
   padding: ${space(1)} ${space(2)};
   font-size: ${p => p.theme.fontSizeMedium};
 `;
@@ -170,6 +158,7 @@ const ListItemContainer = styled('div')`
 const ListContainer = styled('ul')`
   padding: ${space(1)} 0 0 0;
   margin: 0;
+  border-left: 1px solid ${p => p.theme.border};
   list-style-type: none;
 `;
 
@@ -181,6 +170,7 @@ const TextAlignLeft = styled('span')`
 
 const ChartPadding = styled('div')`
   padding: 0 ${space(2)};
+  flex: 2;
 `;
 
 const ChartLabel = styled('p')`
@@ -196,6 +186,8 @@ const Header = styled('div')`
   justify-content: space-between;
 `;
 
-const StyledTopResultsIndicator = styled(TopResultsIndicator)`
-  margin-top: 0px;
+const FlexRowContainer = styled('div')`
+  display: flex;
+  min-height: 200px;
+  padding-bottom: ${space(2)};
 `;

static/app/views/starfish/views/webServiceView/spanGroupBreakdownContainer.tsx

@@ -10,6 +10,8 @@ import {Series} from 'sentry/types/echarts';
 import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import {MODULE_COLOR} from 'sentry/views/starfish/colours';
+import {ModuleName} from 'sentry/views/starfish/types';
 import {PERIOD_REGEX} from 'sentry/views/starfish/utils/dates';
 import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 import {zeroFillSeries} from 'sentry/views/starfish/utils/zeroFillSeries';
@@ -164,12 +166,12 @@ export function SpanGroupBreakdownContainer({transaction: maybeTransaction}: Pro
     topData.length > 0 &&
     segments.length > 0
   ) {
-    segments.forEach((segment, index) => {
-      const label = segment['span.module'];
+    segments.forEach(segment => {
+      const label = segment['span.module'] as ModuleName;
       seriesByDomain[label] = {
         seriesName: `${label}`,
         data: [],
-        color: colorPalette[index],
+        color: MODULE_COLOR[label],
       };
     });