Only show key metadata by default. Hide rest in a drawer.

To make the interface cleaner, we can hide some non-key metadata by
default.

This needs styling, js testing, and probably a js refactor.

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

@@ -1,10 +1,30 @@
 import React from 'react';
 
 export default class NodeDetailsInfo extends React.Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      expanded: false
+    };
+    this.handleClickMore = this.handleClickMore.bind(this);
+  }
+
+  handleClickMore(ev) {
+    ev.preventDefault();
+    const expanded = !this.state.expanded;
+    this.setState({expanded});
+  }
+
   render() {
+    const rows = (this.props.rows || []);
+    const prime = rows.filter(row => row.prime);
+    const overflow = rows.filter(row => !row.prime);
+    const showOverflow = overflow.length > 0 && !this.state.expanded;
+    const showLess = this.state.expanded;
     return (
       <div className="node-details-info">
-        {this.props.rows && this.props.rows.map(field => {
+        {prime && prime.map(field => {
           return (
             <div className="node-details-info-field" key={field.id}>
               <div className="node-details-info-field-label truncate" title={field.label}>
@@ -18,6 +38,22 @@ export default class NodeDetailsInfo extends React.Component {
             </div>
           );
         })}
+        {this.state.expanded && overflow && overflow.map(field => {
+          return (
+            <div className="node-details-info-field" key={field.id}>
+              <div className="node-details-info-field-label truncate" title={field.label}>
+                {field.label}
+              </div>
+              <div className="node-details-info-field-value" title={field.value}>
+                <div className="truncate">
+                  {field.value}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        {showOverflow && <div className="node-details-info-overflow-expand" onClick={this.handleClickMore}>Show more</div>}
+        {showLess && <div className="node-details-info-expand" onClick={this.handleClickMore}>Show less</div>}
       </div>
     );
   }