From e60d64da2702c37664ccec6fc221a33efda6f6a9 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Fri, 20 Nov 2015 16:49:26 +0100 Subject: [PATCH 1/5] Show a spinner while node details are loading --- client/app/scripts/components/node-details.js | 18 +++++++++++++++++- client/app/styles/main.less | 18 ++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js index 954b21c99..075e498fb 100644 --- a/client/app/scripts/components/node-details.js +++ b/client/app/scripts/components/node-details.js @@ -22,7 +22,23 @@ const NodeDetails = React.createClass({ renderLoading: function() { return ( -
+
+
+
+

+ Loading... +

+
+ {this.props.nodeId} +
+
+
+
+
+ +
+
+
); }, diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 3ddb0b9f0..24c1c2c93 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -22,6 +22,7 @@ @background-color: lighten(@primary-color, 66%); @background-secondary-color: lighten(@background-color, 8%); @background-dark-color: @primary-color; +@background-medium-color: lighten(@background-dark-color, 55%); @text-color: lighten(@primary-color, 10%); @text-secondary-color: lighten(@primary-color, 33%); @text-tertiary-color: lighten(@primary-color, 50%); @@ -35,6 +36,10 @@ text-overflow: ellipsis; } +.colorable { + transition: background-color .3s ease-in-out; +} + .palable { transition: opacity .2s ease-in-out; transition: border-color .2s ease-in-out; @@ -352,6 +357,7 @@ h2 { flex-flow: column; &-header { + .colorable; &-wrapper { padding: 36px 36px 16px 36px; @@ -384,6 +390,10 @@ h2 { background-color: @background-dark-color; } + &-loading { + background-color: @background-medium-color; + } + } &-controls { @@ -444,6 +454,14 @@ h2 { &-info { margin-top: 16px; } + + &-loading { + margin-top: 48px; + text-align: center; + font-size: 48px; + color: @background-medium-color; + opacity: 0.7; + } } &-table { From 13a2eec05d23164ff5a27872cb4e476c86152414 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Tue, 24 Nov 2015 18:49:49 +0100 Subject: [PATCH 2/5] Loading details header now has node color --- client/app/scripts/components/node-details.js | 16 ++++++++++++---- client/app/styles/main.less | 4 ---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js index 075e498fb..26b98e19c 100644 --- a/client/app/scripts/components/node-details.js +++ b/client/app/scripts/components/node-details.js @@ -21,15 +21,23 @@ const NodeDetails = React.createClass({ }, renderLoading: function() { + const node = this.props.nodes.get(this.props.nodeId); + const nodeColor = this.getNodeColorDark(node.get('rank'), node.get('label_major')); + const styles = { + header: { + 'backgroundColor': nodeColor + } + }; + return (
-
+
-

- Loading... +

+ {node.get('label_major')}

- {this.props.nodeId} + {node.get('label_minor')}
diff --git a/client/app/styles/main.less b/client/app/styles/main.less index 24c1c2c93..73e06316b 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -390,10 +390,6 @@ h2 { background-color: @background-dark-color; } - &-loading { - background-color: @background-medium-color; - } - } &-controls { From b1fa8a77b51de3ad18e6f25d6af1aecb6f049f72 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Tue, 24 Nov 2015 19:31:46 +0100 Subject: [PATCH 3/5] Click on node unsets loaded node details --- client/app/scripts/stores/app-store.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js index e1db6154b..a750817a2 100644 --- a/client/app/scripts/stores/app-store.js +++ b/client/app/scripts/stores/app-store.js @@ -269,10 +269,9 @@ AppStore.registeredCallback = function(payload) { break; case ActionTypes.CLICK_NODE: - if (payload.nodeId === selectedNodeId) { - // clicking same node twice unsets the selection - deSelectNode(); - } else { + deSelectNode(); + if (payload.nodeId !== selectedNodeId) { + // select new node if it's not the same (in that case just delesect) selectedNodeId = payload.nodeId; } AppStore.emit(AppStore.CHANGE_EVENT); From 37b71487cdbb71d3ff575455bfc6778d6c858054 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Wed, 25 Nov 2015 20:01:42 +0100 Subject: [PATCH 4/5] Disregard node details response if node is no longer selected --- client/app/scripts/stores/app-store.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js index a750817a2..913474b2e 100644 --- a/client/app/scripts/stores/app-store.js +++ b/client/app/scripts/stores/app-store.js @@ -349,13 +349,16 @@ AppStore.registeredCallback = function(payload) { case ActionTypes.RECEIVE_NODE_DETAILS: errorUrl = null; - nodeDetails = payload.details; + // disregard if node is not selected anymore + if (payload.details.id === selectedNodeId) { + nodeDetails = payload.details; + } AppStore.emit(AppStore.CHANGE_EVENT); break; case ActionTypes.RECEIVE_NODES_DELTA: const emptyMessage = !payload.delta.add && !payload.delta.remove - && payload.delta.update; + && !payload.delta.update; if (!emptyMessage) { debug('RECEIVE_NODES_DELTA', From 72fb2f793c13715468f7bbb88c24f3e0123a5c98 Mon Sep 17 00:00:00 2001 From: David Kaltschmidt Date: Thu, 26 Nov 2015 18:47:07 +0100 Subject: [PATCH 5/5] Treat empty text and no text the same for color --- client/app/scripts/mixins/node-color-mixin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/scripts/mixins/node-color-mixin.js b/client/app/scripts/mixins/node-color-mixin.js index 3773bc950..54f3e0b69 100644 --- a/client/app/scripts/mixins/node-color-mixin.js +++ b/client/app/scripts/mixins/node-color-mixin.js @@ -45,7 +45,7 @@ const NodeColorMixin = { return colors(text, secondText); }, getNodeColorDark: function(text, secondText) { - if (text === undefined) { + if (!text) { return PSEUDO_COLOR; } const color = d3.rgb(colors(text, secondText));