From a946e04f2f98231886e4ea8855a1ecb1255fd8f8 Mon Sep 17 00:00:00 2001
From: Noel Chen <36850051+noelchen90@users.noreply.github.com>
Date: Thu, 17 Nov 2022 21:24:05 -0500
Subject: [PATCH] Add metric description tooltip to Analysis Page (#515)

* add metric descriptions

* add metric description tooltip in analysis tabs
---
 .../FineGrainedAnalysis/index.tsx             | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Analysis/AnalysisReport/FineGrainedAnalysis/index.tsx b/frontend/src/components/Analysis/AnalysisReport/FineGrainedAnalysis/index.tsx
index 7c0f183c..93963dec 100644
--- a/frontend/src/components/Analysis/AnalysisReport/FineGrainedAnalysis/index.tsx
+++ b/frontend/src/components/Analysis/AnalysisReport/FineGrainedAnalysis/index.tsx
@@ -1,5 +1,7 @@
-import React from "react";
-import { Tabs, Typography } from "antd";
+import React, { useEffect, useState } from "react";
+import { Tabs, Tooltip, Typography } from "antd";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { backendClient } from "../../../../clients";
 import { AnalysisPanel } from "../AnalysisPanel";
 import { MetricPane } from "./MetricPane";
 import { SystemModel } from "../../../../models";
@@ -33,6 +35,17 @@ export function FineGrainedAnalysis({
   metricToSystemAnalysesParsed,
   addChartFile,
 }: Props) {
+  const [metricDescriptions, setMetricDescriptions] = useState<{
+    [key: string]: string;
+  }>({});
+
+  useEffect(() => {
+    async function fetchMetricDescriptions() {
+      setMetricDescriptions(await backendClient.metricDescriptionsGet());
+    }
+    fetchMetricDescriptions();
+  }, []);
+
   return (
     <AnalysisPanel title="Fine-grained Performance">
       <Typography.Paragraph>
@@ -41,7 +54,17 @@ export function FineGrainedAnalysis({
       </Typography.Paragraph>
       <Tabs activeKey={activeMetric} onChange={onActiveMetricChange}>
         {metricNames.map((metric) => (
-          <Tabs.TabPane tab={metric} key={metric}>
+          <Tabs.TabPane
+            key={metric}
+            tab={
+              <span>
+                {metric}&nbsp;
+                <Tooltip title={metricDescriptions[metric]}>
+                  <QuestionCircleOutlined style={{ color: "gray" }} />
+                </Tooltip>
+              </span>
+            }
+          >
             <MetricPane
               task={task}
               systems={systems}