feat(transitionvis): collapse undefined param/resolves into single ro…

…w. Hide $state$ resolve.

src/transition/keysAndValues.tsx

@@ -64,13 +64,15 @@ export class KeysAndValues extends Component<IProps, IState> {
       );
     };
 
-    return this.isEmpty() ? null : (
-      <div className={this.class('outerdiv')}>
-        <div className={this.class('section')}>
-          {this.props.labels.section}
-        </div>
+    if (this.isEmpty()) return null;
 
-        { Object.keys(this.props.data).map(key =>
+    const keys = Object.keys(this.props.data);
+
+    const defineds = keys.filter(key => this.props.data[key] !== undefined);
+    const undefineds = keys.filter(key => this.props.data[key] === undefined);
+
+    const renderKeyValues = (keys) => 
+        keys.map(key =>
           <div key={key} className={this.class('keyvaldiv')}>
             <div className={this.class('_key')}>
               {key}:
@@ -80,7 +82,20 @@ export class KeysAndValues extends Component<IProps, IState> {
               {renderValue(key, this.props.data[key])}
             </div>
           </div>
-        ) }
+        )
+
+    const renderUndefineds = (keys) => renderKeyValues([keys.join(', ')]);
+
+    return (
+      <div className={this.class('outerdiv')}>
+        <div className={this.class('section')}>
+          {this.props.labels.section}
+        </div>
+
+        {renderKeyValues(defineds)}
+
+        {/* { undefineds.length <= 2 && <KeyValues keys={undefineds} /> } */}
+        { undefineds.length > 2 && renderUndefineds(undefineds) }
 
       </div>
     )

src/transition/nodeDetail.tsx

@@ -1,6 +1,7 @@
 import { h, render, Component } from "preact";
 import {stringify, maxLength} from "../util/strings";
 import {KeysAndValues} from "./keysAndValues";
+import {Transition} from '@uirouter/core';
 
 export interface IProps {
   node: any;
@@ -32,7 +33,7 @@ export class NodeDetail extends Component<IProps, IState> {
         typeof val === 'string' ? val : maxLength(30, stringify(val));
 
     let node = this.props.node;
-    let ignoredTokens = ['$stateParams', '$transition$'];
+    let ignoredTokens = ['$stateParams', '$transition$', '$state$', Transition];
 
     return node && node.resolvables
             .filter(r => ignoredTokens.indexOf(r.token) === -1)