From 0697bad038d29dc40b37cd7e6f1e1c805f160fa6 Mon Sep 17 00:00:00 2001
From: dannda <dann.3004@gmail.com>
Date: Thu, 22 Aug 2024 12:52:22 +0100
Subject: [PATCH] add info icon and tooltip to varSet

---
 src/lib/components/var-list/VarSet.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/var-list/VarSet.js b/src/lib/components/var-list/VarSet.js
index 2f541a3..5a85c35 100644
--- a/src/lib/components/var-list/VarSet.js
+++ b/src/lib/components/var-list/VarSet.js
@@ -1,10 +1,20 @@
 import React, { useState } from "react";
 
-import { faDroplet, faTrash } from "@fortawesome/free-solid-svg-icons";
+import {
+  faDroplet,
+  faTrash,
+  faCircleInfo,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { List } from "@mui/icons-material";
 import _ from "lodash";
-import { ListGroup, Button, Collapse } from "react-bootstrap";
+import {
+  ListGroup,
+  Button,
+  Collapse,
+  OverlayTrigger,
+  Tooltip,
+} from "react-bootstrap";
 
 import { SingleSelectionItem } from "./VarItem";
 import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
@@ -59,6 +69,16 @@ function SingleSelectionSet({
           <div>{set.name}</div>
 
           <div className="d-flex align-items-center gap-1">
+            <OverlayTrigger
+              placement="top"
+              overlay={
+                <Tooltip>
+                  This set represents the mean value of its features
+                </Tooltip>
+              }
+            >
+              <FontAwesomeIcon icon={faCircleInfo}></FontAwesomeIcon>
+            </OverlayTrigger>
             <List />
             {/* <VarHistogram set={set} /> */}
             <Button