Instead of passing the style to Queryable, pass the children components directly

ui/src/components/EntryDetailed.tsx

@@ -38,28 +38,36 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
     const classes = useStyles();
     const response = data.response;
 
+    const bodySizeChild = <div
+        style={{margin: "0 18px", opacity: 0.5}}
+    >
+        {formatSize(bodySize)}
+    </div>;
+
+    const elapsedTimeChild = <div
+        style={{marginRight: 18, opacity: 0.5}}
+    >
+        {Math.round(elapsedTime)}ms
+    </div>;
+
 
     return <div className={classes.entryTitle}>
         <Protocol protocol={protocol} horizontal={true} updateQuery={null}/>
         <div style={{right: "30px", position: "absolute", display: "flex"}}>
             {response && <Queryable
-                text={formatSize(bodySize)}
                 query={`response.bodySize == ${bodySize}`}
                 updateQuery={updateQuery}
-                textStyle={{opacity: 0.5}}
-                wrapperStyle={{margin: "0 18px"}}
-                applyTextEllipsis={false}
                 displayIconOnMouseOver={true}
-            />}
+            >
+                {bodySizeChild}
+            </Queryable>}
             {response && <Queryable
-                text={`${Math.round(elapsedTime)}ms`}
                 query={`elapsedTime >= ${elapsedTime}`}
                 updateQuery={updateQuery}
-                textStyle={{opacity: 0.5}}
-                wrapperStyle={{marginRight: 18}}
-                applyTextEllipsis={false}
                 displayIconOnMouseOver={true}
-            />}
+            >
+                {elapsedTimeChild}
+            </Queryable>}
         </div>
     </div>;
 };

ui/src/components/EntryDetailed/EntrySections.tsx

@@ -29,14 +29,12 @@ const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery,
     return (label && value && <tr className={styles.dataLine}>
                 <td>
                     <Queryable
-                        text={label}
                         query={query}
                         updateQuery={updateQuery}
-                        wrapperStyle={{float: "right"}}
-                        className={`${styles.dataKey}`}
-                        applyTextEllipsis={false}
                         displayIconOnMouseOver={true}
-                    />
+                    >
+                        <div className={`${styles.dataKey}`}>{label}</div>
+                    </Queryable>
                 </td>
                 <td>
                     <FancyTextDisplay
@@ -59,9 +57,9 @@ interface EntrySectionCollapsibleTitleProps {
 
 const EntrySectionCollapsibleTitle: React.FC<EntrySectionCollapsibleTitleProps> = ({title, color, isExpanded}) => {
     return <div className={styles.title}>
-        <span className={`${styles.button} ${isExpanded ? styles.expanded : ''}`} style={{backgroundColor: color}}>
+        <div className={`${styles.button} ${isExpanded ? styles.expanded : ''}`} style={{backgroundColor: color}}>
             {isExpanded ? '-' : '+'}
-        </span>
+        </div>
         <span>{title}</span>
     </div>
 }

ui/src/components/EntryListItem/EntryListItem.module.sass

@@ -70,7 +70,6 @@
   flex-direction: column
   overflow: hidden
   padding-right: 10px
-  padding-left: 10px
   flex-grow: 1
 
 .separatorRight

ui/src/components/UI/Queryable.tsx

@@ -4,24 +4,18 @@ import AddCircleIcon from '@material-ui/icons/AddCircle';
 import './style/Queryable.sass';
 
 interface Props {
-    text: string | number,
     query: string,
     updateQuery: any,
-    title?: string,
+    style?: object,
-    textStyle?: object,
-    wrapperStyle?: object,
     className?: string,
-    isPossibleToCopy?: boolean,
-    applyTextEllipsis?: boolean,
     useTooltip?: boolean,
     displayIconOnMouseOver?: boolean,
-    onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
+    flipped?: boolean,
 }
 
-const Queryable: React.FC<Props> = ({text, query, updateQuery, title, textStyle, wrapperStyle, className, isPossibleToCopy = true, applyTextEllipsis = true, useTooltip= false, displayIconOnMouseOver = false}) => {
+const Queryable: React.FC<Props> = ({query, updateQuery, style, className, useTooltip= false, displayIconOnMouseOver = false, flipped = false, children}) => {
     const [showAddedNotification, setAdded] = useState(false);
     const [showTooltip, setShowTooltip] = useState(false);
-    text = String(text);
 
     const onCopy = () => {
         setAdded(true)
@@ -39,28 +33,27 @@ const Queryable: React.FC<Props> = ({text, query, updateQuery, title, textStyle,
         // eslint-disable-next-line
     }, [showAddedNotification]);
 
-    const textElement = <span title={title} className={'Queryable-Text'} style={textStyle}>{text}</span>;
+    const addButton = query ? <CopyToClipboard text={query} onCopy={onCopy}>
-
-    const copyButton = text ? <CopyToClipboard text={text} onCopy={onCopy}>
                     <span
                         className={`Queryable-Icon`}
                         title={`Add "${query}" to the filter`}
                     >
                         <AddCircleIcon fontSize="small" color="inherit"></AddCircleIcon>
-                        {showAddedNotification && <span className={'Queryable-CopyNotifier'}>Added</span>}
+                        {showAddedNotification && <span className={'Queryable-AddNotifier'}>Added</span>}
                     </span>
 				</CopyToClipboard> : null;
 
     return (
         <div
-            className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' Queryable-ContainerEllipsis' : ''}`}
+            className={`Queryable-Container displayIconOnMouseOver ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''}`}
-            style={wrapperStyle}
+            style={style}
             onMouseOver={ e => setShowTooltip(true)}
             onMouseLeave={ e => setShowTooltip(false)}
         >
-            {textElement}
+            {flipped && addButton}
-            {copyButton}
+            {children}
-            {useTooltip && showTooltip && <span className={'Queryable-CopyNotifier'}>{text}</span>}
+            {!flipped && addButton}
+            {useTooltip && showTooltip && <span className={'Queryable-AddNotifier'}></span>}
         </div>
     );
 };

ui/src/components/UI/StatusCode.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styles from './style/StatusCode.module.sass';
+import Queryable from "./Queryable";
 
 export enum StatusCodeClassification {
     SUCCESS = "success",
@@ -16,15 +17,21 @@ const StatusCode: React.FC<EntryProps> = ({statusCode, updateQuery}) => {
 
     const classification = getClassification(statusCode)
 
-    return <span
+    const child = <span
         title="Status Code"
-        className={`queryable ${styles[classification]} ${styles.base}`}
+        className={`${styles[classification]} ${styles.base}`}
-        onClick={() => {
-            updateQuery(`response.status == ${statusCode}`)
-        }}
     >
         {statusCode}
     </span>
+
+    return <Queryable
+        query={`response.status == ${statusCode}`}
+        updateQuery={updateQuery}
+        style={{minWidth: "68px"}}
+        displayIconOnMouseOver={true}
+    >
+        {child}
+    </Queryable>
 };
 
 export function getClassification(statusCode: number): string {

ui/src/components/UI/Summary.tsx

@@ -10,25 +10,35 @@ interface SummaryProps {
 }
 
 export const Summary: React.FC<SummaryProps> = ({method, summary, updateQuery}) => {
+
+    const methodChild = <span
+        className={`queryable`}
+    >
+        {method}
+    </span>
+
+    const summaryChild = <div
+        className={`queryable ${styles.summary}`}
+    >
+        {summary}
+    </div>
+
+
     return <div className={styles.container}>
         {method && <Queryable
-            text={method}
             query={`method == "${method}"`}
-            updateQuery={updateQuery}
-            title="Method"
             className={`${miscStyles.protocol} ${miscStyles.method}`}
-            wrapperStyle={{height: "14px"}}
+            updateQuery={updateQuery}
-            applyTextEllipsis={false}
             displayIconOnMouseOver={true}
-        />}
+        >
+            {methodChild}
+        </Queryable>}
         {summary && <Queryable
-            text={summary}
             query={`summary == "${summary}"`}
             updateQuery={updateQuery}
-            title="Summary"
-            className={`${styles.summary}`}
-            applyTextEllipsis={false}
             displayIconOnMouseOver={true}
-        />}
+        >
+            {summaryChild}
+        </Queryable>}
     </div>
 };

ui/src/components/UI/style/Queryable.sass

@@ -25,15 +25,7 @@
             border-radius: 4px
             color: #1E884B
 
-    &.Queryable-ContainerEllipsis
+    .Queryable-AddNotifier
-        .Queryable-Text
-            text-align: left
-            text-overflow: ellipsis
-            overflow: hidden
-            white-space: nowrap
-            width: calc(100% - 30px)
-
-    .Queryable-CopyNotifier
         background-color: #1E884B
         font-weight: normal
         padding: 2px 5px

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

@@ -11,6 +11,7 @@
 
     &.method
         margin-right: 10px
+        height: 14px
 
     &.filterPlate
         border-color: #bcc6dd20