From fb11d566b12263c60593b2bc1af47378fb11e6dc Mon Sep 17 00:00:00 2001
From: "M. Mert Yildiran" <mehmet@up9.com>
Date: Mon, 29 Nov 2021 09:49:35 +0300
Subject: [PATCH] Use the `Queryable` component `Summary`

---
 ui/src/components/UI/Queryable.tsx            |  5 +--
 ui/src/components/UI/Summary.tsx              | 34 ++++++++++---------
 .../components/UI/style/Summary.module.sass   |  2 --
 ui/src/components/UI/style/misc.module.sass   |  2 +-
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/ui/src/components/UI/Queryable.tsx b/ui/src/components/UI/Queryable.tsx
index 1396e2a24..5bf12b329 100644
--- a/ui/src/components/UI/Queryable.tsx
+++ b/ui/src/components/UI/Queryable.tsx
@@ -7,6 +7,7 @@ interface Props {
     text: string | number,
     query: string,
     updateQuery: any,
+    title?: string,
     textStyle?: object,
     wrapperStyle?: object,
     className?: string,
@@ -17,7 +18,7 @@ interface Props {
     onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
 }
 
-const Queryable: React.FC<Props> = ({text, query, updateQuery, textStyle, wrapperStyle, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
+const Queryable: React.FC<Props> = ({text, query, updateQuery, title, textStyle, wrapperStyle, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
     const [showAddedNotification, setAdded] = useState(false);
     const [showTooltip, setShowTooltip] = useState(false);
     text = String(text);
@@ -38,7 +39,7 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, textStyle, wrappe
         // eslint-disable-next-line
     }, [showAddedNotification]);
 
-    const textElement = <span className={'Queryable-Text'} style={textStyle}>{text}</span>;
+    const textElement = <span title={title} className={'Queryable-Text'} style={textStyle}>{text}</span>;
 
     const copyButton = text ? <CopyToClipboard text={text} onCopy={onCopy}>
                     <span
diff --git a/ui/src/components/UI/Summary.tsx b/ui/src/components/UI/Summary.tsx
index 3c05a89a8..e7c14a9d4 100644
--- a/ui/src/components/UI/Summary.tsx
+++ b/ui/src/components/UI/Summary.tsx
@@ -1,6 +1,7 @@
 import miscStyles from "./style/misc.module.sass";
 import React from "react";
 import styles from './style/Summary.module.sass';
+import Queryable from "./Queryable";
 
 interface SummaryProps {
     method: string
@@ -10,23 +11,24 @@ interface SummaryProps {
 
 export const Summary: React.FC<SummaryProps> = ({method, summary, updateQuery}) => {
     return <div className={styles.container}>
-        {method && <span
+        {method && <Queryable
+            text={method}
+            query={`method == "${method}"`}
+            updateQuery={updateQuery}
             title="Method"
-            className={`queryable ${miscStyles.protocol} ${miscStyles.method}`}
-            onClick={() => {
-                updateQuery(`method == "${method}"`)
-            }}
-        >
-            {method}
-        </span>}
-        {summary && <div
+            className={`${miscStyles.protocol} ${miscStyles.method}`}
+            wrapperStyle={{height: "14px"}}
+            applyTextEllipsis={false}
+            displayIconOnMouseOver={true}
+        />}
+        {summary && <Queryable
+            text={summary}
+            query={`summary == "${summary}"`}
+            updateQuery={updateQuery}
             title="Summary"
-            className={`queryable ${styles.summary}`}
-            onClick={() => {
-                updateQuery(`summary == "${summary}"`)
-            }}
-        >
-            {summary}
-        </div>}
+            className={`${styles.summary}`}
+            applyTextEllipsis={false}
+            displayIconOnMouseOver={true}
+        />}
     </div>
 };
diff --git a/ui/src/components/UI/style/Summary.module.sass b/ui/src/components/UI/style/Summary.module.sass
index 59bc34893..2bce9af67 100644
--- a/ui/src/components/UI/style/Summary.module.sass
+++ b/ui/src/components/UI/style/Summary.module.sass
@@ -3,6 +3,4 @@
     align-items: center
 
 .summary
-    text-overflow: ellipsis
-    overflow: hidden
     white-space: nowrap
diff --git a/ui/src/components/UI/style/misc.module.sass b/ui/src/components/UI/style/misc.module.sass
index 8c3a1cbac..5324000ef 100644
--- a/ui/src/components/UI/style/misc.module.sass
+++ b/ui/src/components/UI/style/misc.module.sass
@@ -17,7 +17,7 @@
         color: #a0b2ff
         font-size: 10px
 
-.noSelect 
+.noSelect
     -webkit-touch-callout: none
     -webkit-user-select: none
     -khtml-user-select: none