Add description to empty Duration insight

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

@@ -265,6 +265,11 @@ export const DurationInsight = (props: DurationInsightProps) => {
       content={
         <s.Container>
           <ColumnsContainer>
+            {!props.insight.histogramPlot && (
+              <s.DescriptionColumn label={"Description"}>
+                Trigger more actions to see the full duration analysis
+              </s.DescriptionColumn>
+            )}
             {spanLastCall && (
               <KeyValue label={"Last call"}>
                 <CommonTooltip

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

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { footnoteRegularTypography } from "../../../../common/App/typographies";
+import { KeyValue } from "../../InsightCard/KeyValue";
 import { ChartContainerProps } from "./types";
 
 export const Container = styled.div`
@@ -8,6 +9,10 @@ export const Container = styled.div`
   gap: 8px;
 `;
 
+export const DescriptionColumn = styled(KeyValue)`
+  flex-grow: 2;
+`;
+
 export const ChartContainer = styled.div<ChartContainerProps>`
   width: 100%;
   height: ${({ $height }) => $height}px;

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

@@ -20,10 +20,8 @@ export const SlowEndpointInsight = (props: SlowEndpointInsightProps) => {
         <s.ContentContainer>
           <ColumnsContainer>
             <s.DescriptionColumn label={"Description"}>
-              {`On average requests are slower than other endpoints by ${roundTo(
-                diff,
-                2
-              )}%`}
+              On average requests are slower than other endpoints by{" "}
+              {roundTo(diff, 2)}%
             </s.DescriptionColumn>
             <KeyValue label={"Slower by"}>
               <Tag content={getDurationString(props.insight.median)} />