Show truncation warning on click, reworded

client/app/scripts/components/node-details.js

@@ -14,10 +14,9 @@ import NodeDetailsRelatives from './node-details/node-details-relatives';
 import NodeDetailsTable from './node-details/node-details-table';
 import Warning from './warning';
 
-function getTruncationText(label, count) {
-  return `The section ${label} has been truncated because of too many entries.
-${count} entries are not shown.
-We are working on making this better.`;
+function getTruncationText(count) {
+  return 'This section was too long to be handled efficiently and has been truncated'
+  + ` (${count} extra entries not included). We are working to remove this limitation.`;
 }
 
 export class NodeDetails extends React.Component {
@@ -208,7 +207,7 @@ export class NodeDetails extends React.Component {
                     {table.label}
                     {table.truncationCount > 0 && <span
                       className="node-details-content-section-header-warning">
-                      <Warning text={getTruncationText(table.label, table.truncationCount)} />
+                      <Warning text={getTruncationText(table.truncationCount)} />
                     </span>}
                   </div>
                   <NodeDetailsLabels rows={table.rows} />

client/app/scripts/components/warning.js

@@ -1,7 +1,39 @@
 import React from 'react';
+import classnames from 'classnames';
 
-export default function Warning({text}) {
-  return (
-    <span className="warning warning-icon fa fa-warning" title={text} />
-  );
+
+class Warning extends React.Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.handleClick = this.handleClick.bind(this);
+    this.state = {
+      expanded: false
+    };
+  }
+
+  handleClick() {
+    const expanded = !this.state.expanded;
+    this.setState({ expanded });
+  }
+
+  render() {
+    const { text } = this.props;
+    const { expanded } = this.state;
+
+    const className = classnames('warning', {
+      'warning-expanded': expanded
+    });
+
+    return (
+      <div className={className} onClick={this.handleClick}>
+        <div className="warning-wrapper">
+          <span className="warning-icon fa fa-warning" title={text} />
+          {expanded && <span className="warning-text">{text}</span>}
+        </div>
+      </div>
+    );
+  }
 }
+
+export default Warning;

client/app/styles/main.less

@@ -649,10 +649,6 @@ h2 {
         font-size: 90%;
         color: @text-tertiary-color;
         padding: 4px 0;
-
-        &-warning {
-          padding: 0 0.5em;
-        }
       }
     }
   }
@@ -1103,7 +1099,39 @@ h2 {
 }
 
 .warning {
-  .btn-opacity;
+  display: inline-block;
+  cursor: pointer;
+  border: 1px dashed transparent;
+  text-transform: none;
+  border-radius: @border-radius;
+  margin-left: 4px;
+
+  &-wrapper {
+    display: flex;
+  }
+
+  &-text {
+    display: inline-block;
+    color: @text-secondary-color;
+    padding-left: 0.5em;
+  }
+
+  &-icon {
+    .btn-opacity;
+  }
+
+  &-expanded {
+    margin-left: 0;
+    padding: 2px 4px;
+    border-color: @text-tertiary-color;
+  }
+
+  &-expanded &-icon {
+    position: relative;
+    top: 4px;
+    left: 2px;
+  }
+
 }
 
 .sidebar {