Add request breakdown insight

src/components/Insights/ExcessiveAPICallsInsight/index.tsx

@@ -62,21 +62,23 @@ export const ExcessiveAPICallsInsight = (
                     </s.SpanName>
                   </Tooltip>
                   {config.isJaegerEnabled && traceId && (
-                    <s.Button
-                      icon={{ component: CrosshairIcon }}
-                      onClick={() =>
-                        handleTraceButtonClick(
-                          {
-                            name: spanName,
-                            id: traceId
-                          },
-                          props.insight.type,
-                          spanCodeObjectId
-                        )
-                      }
-                    >
-                      Trace
-                    </s.Button>
+                    <Tooltip title={"Open trace"}>
+                      <s.Button
+                        icon={{ component: CrosshairIcon }}
+                        onClick={() =>
+                          handleTraceButtonClick(
+                            {
+                              name: spanName,
+                              id: traceId
+                            },
+                            props.insight.type,
+                            spanCodeObjectId
+                          )
+                        }
+                      >
+                        Trace
+                      </s.Button>
+                    </Tooltip>
                   )}
                 </s.Span>
               );

src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts

@@ -1,8 +1,10 @@
 import styled from "styled-components";
+import { footnoteRegularTypography } from "../../../../../common/App/typographies";
 import { Tag as TagCommon } from "../../../../../common/v3/Tag";
 
 export const AsyncTag = styled(TagCommon)`
+  ${footnoteRegularTypography}
+
   color: ${({ theme }) => theme.colors.v3.text.primary};
   background: ${({ theme }) => theme.colors.v3.surface.brandDark};
-  font-size: 12px;
 `;

src/components/Insights/common/InsightCard/PercentileViewModeToggle/PercentileViewModeToggle.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { PercentileViewModeToggle } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof PercentileViewModeToggle> = {
+  title: "Insights/common/InsightCard/PercentileViewModeToggle",
+  component: PercentileViewModeToggle,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    viewMode: 0.5
+  }
+};

src/components/Insights/common/InsightCard/PercentileViewModeToggle/index.tsx

@@ -0,0 +1,17 @@
+import { PERCENTILES } from "../../../../../constants";
+import { Toggle } from "../../../../common/v3/Toggle";
+import { PercentileViewModeToggleProps } from "./types";
+
+export const PercentileViewModeToggle = ({
+  viewMode,
+  onChange
+}: PercentileViewModeToggleProps) => (
+  <Toggle<typeof viewMode>
+    options={PERCENTILES.map((percentile) => ({
+      value: percentile.percentile,
+      label: percentile.label
+    }))}
+    value={viewMode}
+    onValueChange={onChange}
+  />
+);

src/components/Insights/common/InsightCard/PercentileViewModeToggle/types.ts

@@ -0,0 +1,4 @@
+export interface PercentileViewModeToggleProps {
+  viewMode: number;
+  onChange: (viewMode: number) => void;
+}

src/components/Insights/common/InsightCard/index.tsx

@@ -122,40 +122,50 @@ export const InsightCard = (props: InsightCardProps) => {
           {/* <Button icon={CrossIcon} label={"Dismiss"} buttonType={"tertiary"} /> */}
           <s.Actions>
             {props.onOpenHistogram && (
-              <IconButton
-                icon={{ component: HistogramIcon }}
-                onClick={handleHistogramButtonClick}
-              />
+              <Tooltip title={"Open histogram"}>
+                <IconButton
+                  icon={{ component: HistogramIcon }}
+                  onClick={handleHistogramButtonClick}
+                />
+              </Tooltip>
             )}
             {props.onRecalculate && (
-              <IconButton
-                icon={{ component: RecalculateIcon }}
-                onClick={handleRecalculateClick}
-              />
+              <Tooltip title={"Recalculate"}>
+                <IconButton
+                  icon={{ component: RecalculateIcon }}
+                  onClick={handleRecalculateClick}
+                />
+              </Tooltip>
             )}
             {props.onJiraButtonClick && (
-              <JiraButton
-                onTicketInfoButtonClick={props.onJiraButtonClick}
-                ticketLink={props.jiraTicketInfo?.ticketLink}
-                isHintEnabled={props.jiraTicketInfo?.isHintEnabled}
-                spanCodeObjectId={props.jiraTicketInfo?.spanCodeObjectId}
-              />
+              <Tooltip title={"Jira ticket info"}>
+                <JiraButton
+                  onTicketInfoButtonClick={props.onJiraButtonClick}
+                  ticketLink={props.jiraTicketInfo?.ticketLink}
+                  isHintEnabled={props.jiraTicketInfo?.isHintEnabled}
+                  spanCodeObjectId={props.jiraTicketInfo?.spanCodeObjectId}
+                />
+              </Tooltip>
             )}
             {props.onPin && <IconButton icon={{ component: PinIcon }} />}
             <s.MainActions>
               {props.onGoToTrace && (
-                <Button
-                  icon={TraceIcon}
-                  label={"Trace"}
-                  onClick={() => props.onGoToTrace && props.onGoToTrace()}
-                />
+                <Tooltip title={"Open trace"}>
+                  <Button
+                    icon={TraceIcon}
+                    label={"Trace"}
+                    onClick={() => props.onGoToTrace && props.onGoToTrace()}
+                  />
+                </Tooltip>
               )}
               {props.onGoToLive && (
-                <Button
-                  icon={LiveIcon}
-                  label={"Live"}
-                  onClick={() => props.onGoToLive && props.onGoToLive()}
-                />
+                <Tooltip title={"Open live view"}>
+                  <Button
+                    icon={LiveIcon}
+                    label={"Live"}
+                    onClick={() => props.onGoToLive && props.onGoToLive()}
+                  />
+                </Tooltip>
               )}
             </s.MainActions>
           </s.Actions>

src/components/Insights/common/insights/DurationInsight/ReferenceLineLabel/index.tsx

@@ -1,16 +1,20 @@
 import { Text } from "recharts";
 import { CartesianViewBox } from "recharts/types/util/types";
+import { useTheme } from "styled-components";
 import { isNumber } from "../../../../../../typeGuards/isNumber";
 import { isString } from "../../../../../../typeGuards/isString";
 import { DIVIDER, LABEL_HEIGHT } from "../constants";
 import { ReferenceLineLabelProps } from "./types";
 
+const LABEL_GAP = 4; // in pixels
+
 const isTextAnchor = (
   value?: string
 ): value is "start" | "end" | "middle" | "inherit" | undefined =>
   ["start", "middle", "end", "inherit", undefined].includes(value);
 
 export const ReferenceLineLabel = (props: ReferenceLineLabelProps) => {
+  const theme = useTheme();
   const labels = isString(props.value)
     ? props.value.split(DIVIDER)
     : isNumber(props.value)
@@ -36,8 +40,15 @@ export const ReferenceLineLabel = (props: ReferenceLineLabelProps) => {
           key={text}
           x={x}
           textAnchor={textAnchor || "middle"}
-          y={y + i * LABEL_HEIGHT}
-          dy={labels.length > 1 ? -LABEL_HEIGHT : undefined}
+          y={y + i * LABEL_HEIGHT - LABEL_GAP}
+          dy={
+            labels.length > 1
+              ? -((labels.length - 1) * LABEL_HEIGHT)
+              : undefined
+          }
+          fill={theme.colors.v3.stroke.secondary}
+          fontSize={theme.typographies.captionOne.fontSize}
+          lineHeight={LABEL_HEIGHT}
         >
           {text}
         </Text>

src/components/Insights/common/insights/DurationInsight/XAxisTick/index.tsx

@@ -1,21 +1,10 @@
 import { Text } from "recharts";
-import { DefaultTheme, useTheme } from "styled-components";
+import { useTheme } from "styled-components";
 import { DIVIDER, LABEL_HEIGHT } from "../constants";
 import { XAxisTickProps } from "./types";
 
-const getTickLabelColor = (theme: DefaultTheme) => {
-  switch (theme.mode) {
-    case "light":
-      return "#4d668a";
-    case "dark":
-    case "dark-jetbrains":
-      return "#dfe1e5";
-  }
-};
-
 export const XAxisTick = (props: XAxisTickProps) => {
   const theme = useTheme();
-  const tickLabelColor = getTickLabelColor(theme);
 
   const tick = props.ticks[props.payload.value];
   const textAnchor = tick.textAnchor || props.textAnchor;
@@ -29,7 +18,8 @@ export const XAxisTick = (props: XAxisTickProps) => {
         <Text
           {...props}
           key={text}
-          fill={tickLabelColor}
+          fill={theme.colors.v3.stroke.secondary}
+          fontSize={theme.typographies.captionOne.fontSize}
           textAnchor={textAnchor}
           y={props.y + i * LABEL_HEIGHT}
           className={"recharts-cartesian-axis-tick-value"}

src/components/Insights/common/insights/DurationInsight/constants.ts

@@ -1,2 +1,2 @@
-export const LABEL_HEIGHT = 17; // in pixels
+export const LABEL_HEIGHT = 14; // in pixels ("caption1" Typography line height)
 export const DIVIDER = " | ";

src/components/Insights/common/insights/DurationInsight/index.tsx

@@ -29,7 +29,7 @@ import { ColumnsContainer } from "../../InsightCard/ColumnsContainer";
 import { KeyValue } from "../../InsightCard/KeyValue";
 import { ReferenceLineLabel } from "./ReferenceLineLabel";
 import { XAxisTick } from "./XAxisTick";
-import { DIVIDER } from "./constants";
+import { DIVIDER, LABEL_HEIGHT } from "./constants";
 import * as s from "./styles";
 import { DurationInsightProps, TickData } from "./types";
 
@@ -39,10 +39,10 @@ const LAST_CALL_TIME_DISTANCE_LIMIT = 60 * 1000; // in milliseconds
 const MIN_BAR_HEIGHT = 5;
 const MAX_BAR_HEIGHT = 80;
 const BAR_WIDTH = 6;
-const MIN_X_AXIS_PADDING = 80;
+const MIN_X_AXIS_PADDING = 50;
 const MIN_CHART_CONTAINER_HEIGHT = 135;
-const CHART_Y_MARGIN = 20;
-const MIN_BAR_DISTANCE = 6; // minimum distance between the bars before moving the labels aside
+const CHART_Y_MARGIN = LABEL_HEIGHT;
+const MIN_BAR_DISTANCE = 5; // minimum distance between the bars before moving the labels aside
 
 const getBarColor = (
   theme: DefaultTheme,
@@ -128,9 +128,7 @@ const calculateBars = (
 };
 
 export const DurationInsight = (props: DurationInsightProps) => {
-  // const config = useContext(ConfigContext);
   const theme = useTheme();
-  const tickColor = theme.colors.v3.stroke.secondary;
   const { observe, width } = useDimensions();
 
   const sortedPercentiles = [...props.insight.percentiles].sort(
@@ -390,7 +388,7 @@ export const DurationInsight = (props: DurationInsightProps) => {
                   />
                   <XAxis
                     padding={{ left: XAxisPadding, right: XAxisPadding }}
-                    stroke={tickColor}
+                    stroke={theme.colors.v3.stroke.primary}
                     tick={(props) => <XAxisTick {...props} ticks={ticks} />}
                     interval={0}
                     ticks={Object.keys(ticks).map((x) => Number(x))}
@@ -403,12 +401,10 @@ export const DurationInsight = (props: DurationInsightProps) => {
                       <ReferenceLine
                         key={tickData.label}
                         x={Number(barIndex)}
-                        stroke={tickColor}
+                        stroke={theme.colors.v3.stroke.secondary}
                         strokeDasharray={"5 5"}
                         label={{
-                          position: "top",
                           value: tickData.label,
-                          fill: tickColor,
                           textAnchor: tickData.textAnchor,
                           content: ReferenceLineLabel
                         }}