Use the Queryable component Summary

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

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}`}
+            className={`${miscStyles.protocol} ${miscStyles.method}`}
-            onClick={() => {
+            wrapperStyle={{height: "14px"}}
-                updateQuery(`method == "${method}"`)
+            applyTextEllipsis={false}
-            }}
+            displayIconOnMouseOver={true}
-        >
+        />}
-            {method}
+        {summary && <Queryable
-        </span>}
+            text={summary}
-        {summary && <div
+            query={`summary == "${summary}"`}
+            updateQuery={updateQuery}
             title="Summary"
-            className={`queryable ${styles.summary}`}
+            className={`${styles.summary}`}
-            onClick={() => {
+            applyTextEllipsis={false}
-                updateQuery(`summary == "${summary}"`)
+            displayIconOnMouseOver={true}
-            }}
+        />}
-        >
-            {summary}
-        </div>}
     </div>
 };

ui/src/components/UI/style/Summary.module.sass

@@ -3,6 +3,4 @@
     align-items: center
 
 .summary
-    text-overflow: ellipsis
-    overflow: hidden
     white-space: nowrap

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