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 {