diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 954b21c99..26b98e19c 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -21,8 +21,32 @@ 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 (
-
+
+
+
+
+ {node.get('label_major')}
+
+
+ {node.get('label_minor')}
+
+
+
+
+
);
},
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));
diff --git a/client/app/scripts/stores/app-store.js b/client/app/scripts/stores/app-store.js
index e1db6154b..913474b2e 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);
@@ -350,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',
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 3ddb0b9f0..73e06316b 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;
@@ -444,6 +450,14 @@ h2 {
&-info {
margin-top: 16px;
}
+
+ &-loading {
+ margin-top: 48px;
+ text-align: center;
+ font-size: 48px;
+ color: @background-medium-color;
+ opacity: 0.7;
+ }
}
&-table {