# cluster-ui // Truncating long queries with CSS (#179)

* CRDB-2271: Truncating long queries with CSS

Applying a tried and true hack using `-webkit-line-clamp` to truncate
queries in the statements table to a couple of lines followed by an
ellipsis. To allow a longer preview, I am applying the same fix to the
tooltip, but clamping the lines to 15 (there were around 30 characters
per line and design asked for ~425 characters. It's close enough).

* Adding truncation to Transactions table

Since statements and transactions have enough variation to not be able
to make this change at the common table level, I'm adding truncation to
the transactions table styles to mirror the change in the statements
page table.

* Adding trucation to Statement col in Sessions

Adding trucation to the Statements column on the Sessions page to be
consistent with how statements appear on Statements and Tranactions
pages.

* Truncating long app names in Statements app filter

If a very long name is displayed in the Statements application filter,
the name may cause the dropdown to extend outside of the view or at
least beyond the table and cause excessive horizontal scrolling. To
correct this I have added the `nowrap` option to the `<Text>` component
inside of the Dropdown trigger. The "nowrap" prop will constrain the the
text to a single line but does not offer a constraint for the width. To
constrain the width I have added a local style set to a max-width of
`75ch` (75 characters wide).

Just a note, that I have used this opportunity to bring in the `<Text>`
from `ui-components` to replace the local one here, which was the
inspiration for the common component.

The width and display of the menu are controlled by the Dropdown
component and I didn't want to alter the display of all dropdowns that
use that component. So instead I extended the dropdown component to take
an additional `itemsClassname` prop to apply a class name to the element
rendered for the menu items. This way I can supply another local style
to constrain the width of the menu (to `80ch`) and apply text
truncation.

* Replacing repetitive styles with Sass mixins

DRYing up the code a little with two Sass mixins: text-overflow and
line-clamp.

pkg/ui/cluster-ui/src/core/index.module.scss

@@ -1,10 +1,10 @@
-@import './typography.module';
-@import './colors.module';
+@import "./typography.module";
+@import "./colors.module";
 @import "./base.module";
 @import "./palette.module";
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
+}

pkg/ui/cluster-ui/src/core/typography.module.scss

@@ -128,3 +128,26 @@ $spacing-xx-large: 48px;
   line-height: $line-height--medium;
   font-weight: $font-weight--bold;
 }
+
+//
+//    Text Truncation
+//
+
+// text-overflow - limits a line of text to a single line. If text overflows
+// the container will be truncated with an ellipsis
+@mixin text-overflow {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// line-clamp - limits text in a container to a number of lines. If text
+// overflows container past number of lines, text will be truncated with an
+// ellipsis. This mixin takes a single parameter that is the number of line
+// to limit text to (default is 2)
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

pkg/ui/cluster-ui/src/dropdown/dropdown.tsx

@@ -14,6 +14,13 @@ export interface DropdownOption<T = string> {
   disabled?: boolean;
 }
 
+export interface DropdownItemProps<T> {
+  children: React.ReactNode;
+  value: T;
+  onClick: (value: T) => void;
+  disabled?: boolean;
+  className?: string;
+}
 export interface DropdownProps<T> {
   items: Array<DropdownOption<T>>;
   onChange: (item: DropdownOption<T>["value"]) => void;
@@ -22,6 +29,7 @@ export interface DropdownProps<T> {
   customToggleButtonOptions?: Partial<ButtonProps>;
   menuPosition?: "left" | "right";
   className?: string;
+  itemsClassname?: string;
 }
 
 interface DropdownState {
@@ -53,13 +61,17 @@ const DropdownButton: React.FC<DropdownButtonProps> = ({
 };
 
 function DropdownItem<T = string>(props: DropdownItemProps<T>) {
-  const { children, value, onClick, disabled } = props;
+  const { children, value, onClick, disabled, className } = props;
   return (
     <div
       onClick={() => onClick(value)}
-      className={cx("crl-dropdown__item", {
-        "crl-dropdown__item--disabled": disabled,
-      })}
+      className={cx(
+        "crl-dropdown__item",
+        {
+          "crl-dropdown__item--disabled": disabled,
+        },
+        className,
+      )}
     >
       {children}
     </div>
@@ -111,7 +123,12 @@ export class Dropdown<T = string> extends React.Component<
   };
 
   render() {
-    const { items, menuPosition = "left", className } = this.props;
+    const {
+      items,
+      menuPosition = "left",
+      className,
+      itemsClassname,
+    } = this.props;
     const { isOpen } = this.state;
 
     const menuStyles = cx(
@@ -128,6 +145,7 @@ export class Dropdown<T = string> extends React.Component<
         onClick={this.handleItemSelection}
         key={idx}
         disabled={menuItem.disabled}
+        className={itemsClassname}
       >
         {menuItem.name}
       </DropdownItem>
@@ -152,10 +170,3 @@ export class Dropdown<T = string> extends React.Component<
     );
   }
 }
-
-export interface DropdownItemProps<T> {
-  children: React.ReactNode;
-  value: T;
-  onClick: (value: T) => void;
-  disabled?: boolean;
-}

pkg/ui/cluster-ui/src/sessions/sessionsTable.module.scss

@@ -22,6 +22,7 @@
   width: 400px;
   text-decoration: none;
   cursor: pointer;
+  @include line-clamp(2);
   &:hover {
     color: $colors--link;
     text-decoration: underline;

pkg/ui/cluster-ui/src/sortedtable/table.module.scss

@@ -1,4 +1,4 @@
-@import '../core/index.module.scss';
+@import "../core/index.module.scss";
 
 $table-cell-border: 1px solid $colors--neutral-2;
 $stats-table-td--fg: $colors--neutral-6;
@@ -19,7 +19,7 @@ $stats-table-tr--bg: $colors--neutral-0;
     border-right: 1px solid $colors--neutral-2;
     width: 250px;
   }
-  
+
   &__row {
     &--body {
       letter-spacing: 0.33px;

pkg/ui/cluster-ui/src/statementsPage/statementsPage.module.scss

@@ -7,7 +7,8 @@
   margin-bottom: 7px;
 }
 
-.cl-count-title, .last-cleared-title {
+.cl-count-title,
+.last-cleared-title {
   font-family: $font-family--base;
   font-size: 14px;
   padding: 0px;
@@ -51,3 +52,20 @@ h2.base-heading {
   flex-grow: 0;
   width: 100%;
 }
+
+.app-filter-dropdown {
+  /* 
+    we are truncating the text in the filter, 
+    but need to constrain to a width
+  */
+  max-width: 75ch;
+}
+
+.app-filter-dropdown-item {
+  /*
+    Truncating and constrainging the width of the 
+    items in the app filter dropdown
+  */
+  max-width: 80ch;
+  @include text-overflow;
+}

pkg/ui/cluster-ui/src/statementsPage/statementsPage.tsx

@@ -5,6 +5,8 @@ import moment from "moment";
 import Helmet from "react-helmet";
 import classNames from "classnames/bind";
 
+import { Text } from "@cockroachlabs/ui-components";
+
 import {
   Dropdown,
   Loading,
@@ -14,8 +16,6 @@ import {
   Search,
   Pagination,
   ResultsPerPageLabel,
-  Text,
-  TextTypes,
 } from "src/index";
 import { DATE_FORMAT, appAttr, getMatchParamByName } from "src/util";
 import {
@@ -253,8 +253,16 @@ export class StatementsPage extends React.Component<
             />
           </PageConfigItem>
           <PageConfigItem>
-            <Dropdown items={appOptions} onChange={this.selectApp}>
-              <Text textType={TextTypes.BodyStrong}>
+            <Dropdown
+              items={appOptions}
+              onChange={this.selectApp}
+              itemsClassname={cx("app-filter-dropdown-item")}
+            >
+              <Text
+                type="body-strong"
+                noWrap={true}
+                className={cx("app-filter-dropdown")}
+              >
                 {`App: ${decodeURIComponent(currentOption.name)}`}
               </Text>
             </Dropdown>

pkg/ui/cluster-ui/src/statementsTable/statementsTable.module.scss

@@ -1,4 +1,4 @@
-@import 'src/core/index.module';
+@import "src/core/index.module";
 
 .statements-table__col-time {
   white-space: nowrap;
@@ -18,13 +18,16 @@
   }
 }
 
-.statements-table__col-rows, .statements-table__col-latency {
+.statements-table__col-rows,
+.statements-table__col-latency {
   &--bar-chart {
     min-width: 150px;
   }
 }
 
-.statements-table__col-count, .statements-table__col-retries, .statements-table__col-rows {
+.statements-table__col-count,
+.statements-table__col-retries,
+.statements-table__col-rows {
   &--bar-chart {
     margin-left: 0;
 
@@ -42,5 +45,6 @@
   width: 400px;
   div {
     font-size: $font-size--small;
+    @include line-clamp(2);
   }
 }

pkg/ui/cluster-ui/src/statementsTable/statementsTableContent.module.scss

@@ -1,11 +1,12 @@
-@import 'src/core/index.module';
+@import "src/core/index.module";
 
 .cl-table-link__description {
   font-size: $font-size--small;
   line-height: 22px;
   color: $colors--neutral-1;
   white-space: pre-wrap;
   margin-bottom: 0;
+  @include line-clamp(15);
 }
 
 .cl-table-link__statement-tooltip--fixed-width {
@@ -54,7 +55,7 @@
   align-items: center;
 
   .activate-diagnostic-link {
-    width: auto!important;
+    width: auto !important;
   }
 
   .activate-diagnostic-dropdown {
@@ -69,4 +70,4 @@
       text-decoration: none;
     }
   }
-}
+}

pkg/ui/cluster-ui/src/transactionsTable/transactionsCells/transactionsCells.module.scss

@@ -1,14 +1,15 @@
-@import '../../core/index.module.scss';
+@import "../../core/index.module.scss";
 
 .hover-area {
   white-space: pre-line;
   cursor: pointer;
   font-family: $font-family--monospace;
   font-size: $font-size--small;
   color: $colors--neutral-6;
+  @include line-clamp(2);
 }
 
 .hover-area:hover {
   text-decoration: underline;
   color: #0788ff;
-}
+}