Skip to content

Commit

Permalink
feat(transitionvis): switch all styles to px, add preformatted param …
Browse files Browse the repository at this point in the history 
…values, fix some flexbox issues.
  • Loading branch information
@christopherthielen
christopherthielen committed Jan 3, 2018
1 parent 1711525 commit 6b5e04f
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 145 deletions.
4 changes: 2 additions & 2 deletions src/transition/BreadcrumbArrow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ export class BreadcrumbArrow extends Component<IProps, IState> {
render() {
return !this.props.transition ? null : (
<div className={this.props.status + " uirTranVis_historyEntry"} onClick={this.handleClick}>
<div className="uirTranVis_transSummary">
<div className="uirTranVis_historyEntrySummary">
<div className="uirTranVis_transId">{this.props.transition.$id}</div>
<div className="uirTranVis_status">
{this.props.status}
{!this.props.message ? null : <span>: {this.props.message}</span>}
</div>
<div className="uirTranVis_transName">
<i className={this.iconClass()} /> {this.props.transition.to().name}
<i className={this.iconClass()}/> {this.props.transition.to().name}
</div>
</div>
</div>
Expand Down
32 changes: 16 additions & 16 deletions src/transition/KeysAndValues.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const isObject = (val) => typeof val === 'object';
const displayValue = function (object) {
if (object === undefined) return "undefined";
if (object === null) return "null";
if (typeof object === 'string') return '"' + maxLength(100, object) + '"';
if (typeof object === 'string') return <span className="uirTranVis_code">"{maxLength(100, object)}"</span>;
if (Array.isArray(object)) return "[Array]";
if (isObject(object)) return "[Object]";
if (typeof object.toString === 'function') return maxLength(100, object.toString());
Expand Down Expand Up @@ -46,24 +46,24 @@ export class KeysAndValues extends Component<IProps, IState> {
isEmpty = () =>
!this.props.data || Object.keys(this.props.data).length === 0;

class = (name) =>
classFor = (name) =>
this.props.classes && this.props.classes[name] !== undefined ?
this.props.classes[name] :
defaultClass[name];

render() {
const renderValue = (key, val) => {
if (isObject(val)) return (
renderValue = (key: string, val: any) => {
if (isObject(val)) return (
<span className="link" onClick={() => Modal.show(this.props.labels, key, val, ResolveData)}>[Object]</span>
);
);

return (
return (
<div className={this.props.classes.value}>
{displayValue(val)}
</div>
);
};
);
};

render() {
if (this.isEmpty()) return null;

const keys = Object.keys(this.props.data);
Expand All @@ -73,22 +73,22 @@ export class KeysAndValues extends Component<IProps, IState> {

const renderKeyValues = (keys) =>
keys.map(key =>
<div key={key} className={this.class('keyvaldiv')}>
<div className={this.class('_key')}>
<div key={key} className={this.classFor('keyvaldiv')}>
<div className={this.classFor('_key')}>
{key}:
</div>

<div className={this.class('value')}>
{renderValue(key, this.props.data[key])}
<div className={this.classFor('value')}>
{this.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')}>
<div className={this.classFor('outerdiv')}>
<div className={this.classFor('section')}>
{this.props.labels.section}
</div>

Expand Down
28 changes: 12 additions & 16 deletions src/transition/NodePaths.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,28 +92,24 @@ export class NodePaths extends Component<IProps, IState> {
<div className="uirTranVis_Row">
<div className={`${elem.fromType}`}>
{ !elem.fromType ? null :
<div>
<div className="uirTranVis_nodeContent">
<NodeDetail trans={this.props.transition} node={elem.from} type={elem.fromType}/>
<FlowArrow
bottom='V'
top={idx ? 'V' : elem.toType ? 'RU' : 'AU'}
/>
</div>
<div className="uirTranVis_nodeContent">
<NodeDetail trans={this.props.transition} node={elem.from} type={elem.fromType}/>
<FlowArrow
bottom='V'
top={idx ? 'V' : elem.toType ? 'RU' : 'AU'}
/>
</div>
}
</div>

<div className={`${elem.toType}`}>
{ !elem.toType ? null :
<div>
<div className="uirTranVis_nodeContent">
<FlowArrow
top={idx ? 'V' : elem.fromType ? 'RD' : 'V'}
bottom={idx == lastEnterIdx ? 'AD' : 'V'}
/>
<NodeDetail trans={this.props.transition} node={elem.to} type={elem.toType}/>
</div>
<div className="uirTranVis_nodeContent">
<FlowArrow
top={idx ? 'V' : elem.fromType ? 'RD' : 'V'}
bottom={idx == lastEnterIdx ? 'AD' : 'V'}
/>
<NodeDetail trans={this.props.transition} node={elem.to} type={elem.toType}/>
</div>
}
</div>
Expand Down
116 changes: 63 additions & 53 deletions src/transition/TransSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,68 +7,78 @@ export interface IProps {
rejection: string;
}

export interface IState { }
export interface IState {
collapseFalsy: boolean;
}

export class TransSummary extends Component<IProps, IState> {
render() {
state = { collapseFalsy: true };

renderParameterValues() {
const params = this.props.trans.params();
const paramsByType = Object.keys(params).reduce((buckets, key) => {
const val = params[key];
const bucket = val === undefined ? 'undefined' : val === null ? 'null' : val === '' ? 'empty string' : 'other';
buckets[bucket][key] = val;
return buckets;
}, { undefined: {}, null: {}, 'empty string': {}, other: {} });

const falsyBuckets = Object.keys(paramsByType)
.filter(key => key !== 'other')
.map(key => ({ key, count: Object.keys(paramsByType[key]).length}))
.filter(bucket => !!bucket.count);
const falsyTotal = falsyBuckets.reduce((acc, bucket) => acc + bucket.count, 0);

const collapse = this.state.collapseFalsy;

return (
<table className="uirTranVis_transSummary">
<tbody>
<tr><td>From State:</td><td>{ this.props.trans.from().name || '(root)' }</td></tr>
<tr><td>To State:</td><td>{this.props.trans.to().name || '(root)'}</td></tr>
<tr>
<td colSpan={1}>Parameters:</td>
<td colSpan={1}>
<KeysAndValues
data={this.props.trans.params()}
labels={{ section: '', modalTitle: 'Parameter value: ' }}
classes={{ outerdiv: '', keyvaldiv: 'uirTranVis_keyValue', section: '', _key: '', value: '' }}>
</KeysAndValues>
</td>
</tr>
<div className="uirTranVis_keysAndValues">
<KeysAndValues
data={paramsByType.other}
labels={{ section: '', modalTitle: 'Parameter value: ' }}
classes={{ outerdiv: '', keyvaldiv: 'uirTranVis_keyValue', section: '', _key: '', value: '' }}/>

<tr>
<td>Outcome:</td>
<td>
{ this.props.status }
{ this.props.rejection
? <span>: {this.props.rejection}</span>
: null }
</td>
</tr>
</tbody>
</table>
{ !!falsyTotal && (
<a href="" onClick={() => this.setState({ collapseFalsy: !collapse})}>
{collapse ? 'show' : 'hide'} {falsyTotal} {falsyBuckets.map(bucket => bucket.key).join(' or ')} parameter values
</a>
)}

{ !this.state.collapseFalsy && (
falsyBuckets.map(bucket => (
<KeysAndValues key={bucket.key}
data={paramsByType[bucket.key]}
labels={{ section: '', modalTitle: 'Parameter value: ' }}
classes={{ outerdiv: '', keyvaldiv: 'uirTranVis_keyValue', section: '', _key: '', value: '' }}/>
))
)}
</div>
)
}

render2() {
render() {
return (
<table className="uirTranVis_transSummary">
<tbody>
<tr><td>From State:</td><td>{ this.props.trans.from().name || '(root)' }</td></tr>
<tr><td>To State:</td><td>{this.props.trans.to().name || '(root)'}</td></tr>
<tr>
<td colSpan={1}>Parameters:</td>
<td colSpan={1}>
<KeysAndValues
data={this.props.trans.params()}
labels={{ section: '', modalTitle: 'Parameter value: ' }}
classes={{ outerdiv: '', keyvaldiv: 'uirTranVis_keyValue', section: '', _key: '', value: '' }}>
</KeysAndValues>
</td>
</tr>
<div className="uirTranVis_transSummary">
<div className="uirTranVis_summaryData">
<span>From:</span><strong>{ this.props.trans.from().name || '(root)' }</strong>
</div>

<div className="uirTranVis_summaryData">
<span>To:</span><strong>{ this.props.trans.to().name || '(root)' }</strong>
</div>

<div className="uirTranVis_summaryData">
<span>Result:</span>
<div>
<strong>{this.props.status}</strong>
{this.props.rejection ? <span>: {this.props.rejection}</span> : null}
</div>
</div>

<div className="uirTranVis_summaryHeading">Parameter Values: </div>

<tr>
<td>Outcome:</td>
<td>
{ this.props.status }
{ this.props.rejection
? <span>: {this.props.rejection}</span>
: null }
</td>
</tr>
</tbody>
</table>
{this.renderParameterValues()}
</div>
)
}
}
Loading

0 comments on commit 6b5e04f

Please sign in to comment.