Merge pull request #1355 from digma-ai/feature/insight-tooltip

Add Insight metrics tooltip

Author: kshmidt-digma

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/GradientProgressBar/index.tsx

@@ -0,0 +1,19 @@
+import * as s from "./styles";
+import type { GradientBackgroundProps } from "./types";
+
+export const GradientProgressBar = ({
+  label,
+  value,
+  valueLabel
+}: GradientBackgroundProps) => (
+  <s.Container>
+    <s.ProgressBarContainer>
+      <s.Background />
+      <s.Circle value={value} />
+    </s.ProgressBarContainer>
+    <s.Legend>
+      <s.Label>{label}</s.Label>
+      <s.ValueLabel>{valueLabel}</s.ValueLabel>
+    </s.Legend>
+  </s.Container>
+);

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/GradientProgressBar/styles.ts

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import { footnoteRegularTypography } from "../../../../../../../../../../common/App/typographies";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const ProgressBarContainer = styled.div`
+  position: relative;
+`;
+
+export const Background = styled.div`
+  border-radius: 10px;
+  opacity: 0.7;
+  background: linear-gradient(90deg, #6ebd9c 0%, #da802d 50.5%, #da2d5f 100%);
+  height: 4px;
+  width: 100%;
+`;
+
+const CIRCLE_RADIUS = 5; // pixels
+
+export const Circle = styled.div<{ value: number }>`
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid ${({ theme }) => theme.colors.v3.surface.primary};
+  background: ${({ theme }) => theme.colors.v3.icon.primary};
+  width: ${CIRCLE_RADIUS * 2}px;
+  height: ${CIRCLE_RADIUS * 2}px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  left: ${({ value }) => value - CIRCLE_RADIUS / 2}px;
+`;
+
+export const Legend = styled.div`
+  ${footnoteRegularTypography}
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Label = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+`;
+
+export const ValueLabel = styled.span`
+  font-weight: 700;
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/GradientProgressBar/types.ts

@@ -0,0 +1,5 @@
+export interface GradientBackgroundProps {
+  value: number;
+  label: string;
+  valueLabel: string;
+}

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/InsightIconTooltip/index.tsx

@@ -0,0 +1,37 @@
+import { isNumber } from "../../../../../../../../../../../typeGuards/isNumber";
+import { intersperse } from "../../../../../../../../../../../utils/intersperse";
+import { roundTo } from "../../../../../../../../../../../utils/roundTo";
+import { getValueLabel } from "../getValueLabel";
+import { GradientProgressBar } from "../GradientProgressBar";
+import * as s from "./styles";
+import type { InsightIconTooltipProps, Metric } from "./types";
+
+export const InsightIconTooltip = ({
+  severity,
+  impact,
+  criticality
+}: InsightIconTooltipProps) => {
+  const metrics = [
+    { label: "Severity", value: severity },
+    { label: "Impact", value: impact },
+    { label: "Criticality", value: criticality }
+  ].filter((metric) => isNumber(metric.value)) as Metric[];
+
+  return (
+    <s.TitleContainer>
+      {intersperse(
+        metrics.map(({ label, value }) => (
+          <GradientProgressBar
+            key={label}
+            label={label}
+            value={roundTo(value * 100, 0)}
+            valueLabel={getValueLabel(value)}
+          />
+        )),
+        (i) => (
+          <s.Divider key={`separator-${i}`} />
+        )
+      )}
+    </s.TitleContainer>
+  );
+};

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/InsightIconTooltip/styles.ts

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 180px;
+  padding: 8px;
+`;
+
+export const Divider = styled.div`
+  height: 1px;
+  background: ${({ theme }) => theme.colors.v3.stroke.tertiary};
+  width: 100%;
+`;

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/InsightIconTooltip/types.ts

@@ -0,0 +1,10 @@
+export interface InsightIconTooltipProps {
+  severity?: number;
+  impact?: number;
+  criticality: number;
+}
+
+export interface Metric {
+  label: string;
+  value: number;
+}

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/getValueLabel.ts

@@ -0,0 +1,13 @@
+import type { ValueLabel } from "./types";
+
+export const getValueLabel = (value: number): ValueLabel => {
+  if (value < 0.2) {
+    return "Low";
+  }
+
+  if (value < 0.6) {
+    return "Medium";
+  }
+
+  return "High";
+};

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/index.tsx

@@ -1,42 +1,32 @@
-import type { InsightTypeInfo } from "../../../../../../../../../../utils/getInsightTypeInfo";
-import { roundTo } from "../../../../../../../../../../utils/roundTo";
 import { Tag } from "../../../../../../../../../common/v3/Tag";
 import type { TagType } from "../../../../../../../../../common/v3/Tag/types";
+import { getValueLabel } from "./getValueLabel";
+import { InsightIconTooltip } from "./InsightIconTooltip";
 import * as s from "./styles";
-import type { InsightIconProps } from "./types";
+import type { InsightIconProps, ValueLabel } from "./types";
 
-export const getTagType = (criticality: number): TagType => {
-  if (criticality < 0.2) {
-    return "lowSeverity";
+const getTagType = (valueLabel: ValueLabel): TagType => {
+  switch (valueLabel) {
+    case "Low":
+      return "lowSeverity";
+    case "Medium":
+      return "mediumSeverity";
+    case "High":
+      return "highSeverity";
   }
-
-  if (criticality < 0.6) {
-    return "mediumSeverity";
-  }
-
-  return "highSeverity";
-};
-
-export const getTagTitle = (
-  insightTypeInfo: InsightTypeInfo | undefined,
-  criticality: number
-) => {
-  const title = `${
-    insightTypeInfo ? `${insightTypeInfo.label}\n` : ""
-  }Criticality: ${roundTo(criticality * 100, 0)}%`;
-
-  return <s.TagTitle>{title}</s.TagTitle>;
 };
 
 export const InsightIcon = ({
   insightTypeInfo,
+  severity,
+  impact,
   criticality
 }: InsightIconProps) => {
-  const tagTitle = getTagTitle(insightTypeInfo, criticality);
-  const tagType = getTagType(criticality);
+  const tagType = getTagType(getValueLabel(criticality));
+
   return (
     <Tag
-      title={tagTitle}
+      title={<InsightIconTooltip {...{ severity, impact, criticality }} />}
       type={tagType}
       content={
         <s.InsightIconContainer>

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/styles.ts

@@ -1,9 +1,5 @@
 import styled from "styled-components";
 
-export const TagTitle = styled.span`
-  white-space: pre;
-`;
-
 export const InsightIconContainer = styled.div`
   display: flex;
 `;

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/types.ts

@@ -2,5 +2,9 @@ import type { InsightTypeInfo } from "../../../../../../../../../../utils/getIns
 
 export interface InsightIconProps {
   insightTypeInfo: InsightTypeInfo;
+  severity?: number;
+  impact?: number;
   criticality: number;
 }
+
+export type ValueLabel = "Low" | "Medium" | "High";