Skip to content

Commit 6b5e04f

Browse files
christopherthielenchristopherthielen
committed
feat(transitionvis): switch all styles to px, add preformatted param values, fix some flexbox issues.
1 parent 1711525 commit 6b5e04f

File tree

5 files changed

+160
-145
lines changed

5 files changed

+160
-145
lines changed

‎src/transition/BreadcrumbArrow.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@ export class BreadcrumbArrow extends Component<IProps, IState> {
2929
render() {
3030
return !this.props.transition ? null : (
3131
<div className={this.props.status + " uirTranVis_historyEntry"} onClick={this.handleClick}>
32-
<div className="uirTranVis_transSummary">
32+
<div className="uirTranVis_historyEntrySummary">
3333
<div className="uirTranVis_transId">{this.props.transition.$id}</div>
3434
<div className="uirTranVis_status">
3535
{this.props.status}
3636
{!this.props.message ? null : <span>: {this.props.message}</span>}
3737
</div>
3838
<div className="uirTranVis_transName">
39-
<i className={this.iconClass()} /> {this.props.transition.to().name}
39+
<i className={this.iconClass()}/> {this.props.transition.to().name}
4040
</div>
4141
</div>
4242
</div>

‎src/transition/KeysAndValues.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const isObject = (val) => typeof val === 'object';
88
const displayValue = function (object) {
99
if (object === undefined) return "undefined";
1010
if (object === null) return "null";
11-
if (typeof object === 'string') return '"' + maxLength(100, object) + '"';
11+
if (typeof object === 'string') return <span className="uirTranVis_code">"{maxLength(100, object)}"</span>;
1212
if (Array.isArray(object)) return "[Array]";
1313
if (isObject(object)) return "[Object]";
1414
if (typeof object.toString === 'function') return maxLength(100, object.toString());
@@ -46,24 +46,24 @@ export class KeysAndValues extends Component<IProps, IState> {
4646
isEmpty = () =>
4747
!this.props.data || Object.keys(this.props.data).length === 0;
4848

49-
class = (name) =>
49+
classFor = (name) =>
5050
this.props.classes && this.props.classes[name] !== undefined ?
5151
this.props.classes[name] :
5252
defaultClass[name];
5353

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

60-
return (
59+
return (
6160
<div className={this.props.classes.value}>
6261
{displayValue(val)}
6362
</div>
64-
);
65-
};
63+
);
64+
};
6665

66+
render() {
6767
if (this.isEmpty()) return null;
6868

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

7474
const renderKeyValues = (keys) =>
7575
keys.map(key =>
76-
<div key={key} className={this.class('keyvaldiv')}>
77-
<div className={this.class('_key')}>
76+
<div key={key} className={this.classFor('keyvaldiv')}>
77+
<div className={this.classFor('_key')}>
7878
{key}:
7979
</div>
8080

81-
<div className={this.class('value')}>
82-
{renderValue(key, this.props.data[key])}
81+
<div className={this.classFor('value')}>
82+
{this.renderValue(key, this.props.data[key])}
8383
</div>
8484
</div>
85-
)
85+
);
8686

8787
const renderUndefineds = (keys) => renderKeyValues([keys.join(', ')]);
8888

8989
return (
90-
<div className={this.class('outerdiv')}>
91-
<div className={this.class('section')}>
90+
<div className={this.classFor('outerdiv')}>
91+
<div className={this.classFor('section')}>
9292
{this.props.labels.section}
9393
</div>
9494

‎src/transition/NodePaths.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -92,28 +92,24 @@ export class NodePaths extends Component<IProps, IState> {
9292
<div className="uirTranVis_Row">
9393
<div className={`${elem.fromType}`}>
9494
{ !elem.fromType ? null :
95-
<div>
96-
<div className="uirTranVis_nodeContent">
97-
<NodeDetail trans={this.props.transition} node={elem.from} type={elem.fromType}/>
98-
<FlowArrow
99-
bottom='V'
100-
top={idx ? 'V' : elem.toType ? 'RU' : 'AU'}
101-
/>
102-
</div>
95+
<div className="uirTranVis_nodeContent">
96+
<NodeDetail trans={this.props.transition} node={elem.from} type={elem.fromType}/>
97+
<FlowArrow
98+
bottom='V'
99+
top={idx ? 'V' : elem.toType ? 'RU' : 'AU'}
100+
/>
103101
</div>
104102
}
105103
</div>
106104

107105
<div className={`${elem.toType}`}>
108106
{ !elem.toType ? null :
109-
<div>
110-
<div className="uirTranVis_nodeContent">
111-
<FlowArrow
112-
top={idx ? 'V' : elem.fromType ? 'RD' : 'V'}
113-
bottom={idx == lastEnterIdx ? 'AD' : 'V'}
114-
/>
115-
<NodeDetail trans={this.props.transition} node={elem.to} type={elem.toType}/>
116-
</div>
107+
<div className="uirTranVis_nodeContent">
108+
<FlowArrow
109+
top={idx ? 'V' : elem.fromType ? 'RD' : 'V'}
110+
bottom={idx == lastEnterIdx ? 'AD' : 'V'}
111+
/>
112+
<NodeDetail trans={this.props.transition} node={elem.to} type={elem.toType}/>
117113
</div>
118114
}
119115
</div>

‎src/transition/TransSummary.tsx

Lines changed: 63 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,68 +7,78 @@ export interface IProps {
77
rejection: string;
88
}
99

10-
export interface IState { }
10+
export interface IState {
11+
collapseFalsy: boolean;
12+
}
1113

1214
export class TransSummary extends Component<IProps, IState> {
13-
render() {
15+
state = { collapseFalsy: true };
16+
17+
renderParameterValues() {
18+
const params = this.props.trans.params();
19+
const paramsByType = Object.keys(params).reduce((buckets, key) => {
20+
const val = params[key];
21+
const bucket = val === undefined ? 'undefined' : val === null ? 'null' : val === '' ? 'empty string' : 'other';
22+
buckets[bucket][key] = val;
23+
return buckets;
24+
}, { undefined: {}, null: {}, 'empty string': {}, other: {} });
25+
26+
const falsyBuckets = Object.keys(paramsByType)
27+
.filter(key => key !== 'other')
28+
.map(key => ({ key, count: Object.keys(paramsByType[key]).length}))
29+
.filter(bucket => !!bucket.count);
30+
const falsyTotal = falsyBuckets.reduce((acc, bucket) => acc + bucket.count, 0);
31+
32+
const collapse = this.state.collapseFalsy;
33+
1434
return (
15-
<table className="uirTranVis_transSummary">
16-
<tbody>
17-
<tr><td>From State:</td><td>{ this.props.trans.from().name || '(root)' }</td></tr>
18-
<tr><td>To State:</td><td>{this.props.trans.to().name || '(root)'}</td></tr>
19-
<tr>
20-
<td colSpan={1}>Parameters:</td>
21-
<td colSpan={1}>
22-
<KeysAndValues
23-
data={this.props.trans.params()}
24-
labels={{ section: '', modalTitle: 'Parameter value: ' }}
25-
classes={{ outerdiv: '', keyvaldiv: 'uirTranVis_keyValue', section: '', _key: '', value: '' }}>
26-
</KeysAndValues>
27-
</td>
28-
</tr>
35+
<div className="uirTranVis_keysAndValues">
36+
<KeysAndValues
37+
data={paramsByType.other}
38+
labels={{ section: '', modalTitle: 'Parameter value: ' }}
39+
classes={{ outerdiv: '', keyvaldiv: 'uirTranVis_keyValue', section: '', _key: '', value: '' }}/>
2940

30-
<tr>
31-
<td>Outcome:</td>
32-
<td>
33-
{ this.props.status }
34-
{ this.props.rejection
35-
? <span>: {this.props.rejection}</span>
36-
: null }
37-
</td>
38-
</tr>
39-
</tbody>
40-
</table>
41+
{ !!falsyTotal && (
42+
<a href="" onClick={() => this.setState({ collapseFalsy: !collapse})}>
43+
{collapse ? 'show' : 'hide'} {falsyTotal} {falsyBuckets.map(bucket => bucket.key).join(' or ')} parameter values
44+
</a>
45+
)}
46+
47+
{ !this.state.collapseFalsy && (
48+
falsyBuckets.map(bucket => (
49+
<KeysAndValues key={bucket.key}
50+
data={paramsByType[bucket.key]}
51+
labels={{ section: '', modalTitle: 'Parameter value: ' }}
52+
classes={{ outerdiv: '', keyvaldiv: 'uirTranVis_keyValue', section: '', _key: '', value: '' }}/>
53+
))
54+
)}
55+
</div>
4156
)
4257
}
4358

44-
render2() {
59+
render() {
4560
return (
46-
<table className="uirTranVis_transSummary">
47-
<tbody>
48-
<tr><td>From State:</td><td>{ this.props.trans.from().name || '(root)' }</td></tr>
49-
<tr><td>To State:</td><td>{this.props.trans.to().name || '(root)'}</td></tr>
50-
<tr>
51-
<td colSpan={1}>Parameters:</td>
52-
<td colSpan={1}>
53-
<KeysAndValues
54-
data={this.props.trans.params()}
55-
labels={{ section: '', modalTitle: 'Parameter value: ' }}
56-
classes={{ outerdiv: '', keyvaldiv: 'uirTranVis_keyValue', section: '', _key: '', value: '' }}>
57-
</KeysAndValues>
58-
</td>
59-
</tr>
61+
<div className="uirTranVis_transSummary">
62+
<div className="uirTranVis_summaryData">
63+
<span>From:</span><strong>{ this.props.trans.from().name || '(root)' }</strong>
64+
</div>
65+
66+
<div className="uirTranVis_summaryData">
67+
<span>To:</span><strong>{ this.props.trans.to().name || '(root)' }</strong>
68+
</div>
69+
70+
<div className="uirTranVis_summaryData">
71+
<span>Result:</span>
72+
<div>
73+
<strong>{this.props.status}</strong>
74+
{this.props.rejection ? <span>: {this.props.rejection}</span> : null}
75+
</div>
76+
</div>
77+
78+
<div className="uirTranVis_summaryHeading">Parameter Values: </div>
6079

61-
<tr>
62-
<td>Outcome:</td>
63-
<td>
64-
{ this.props.status }
65-
{ this.props.rejection
66-
? <span>: {this.props.rejection}</span>
67-
: null }
68-
</td>
69-
</tr>
70-
</tbody>
71-
</table>
80+
{this.renderParameterValues()}
81+
</div>
7282
)
7383
}
7484
}

0 commit comments

Comments
 (0)