From b9563f35d7c5e20ea211c76c4204f4d41cfa5760 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 12 Jun 2015 09:23:32 +0200
Subject: [PATCH] Styled pseudonodes pale and remove interaction

---
 client/app/scripts/charts/node.js        | 20 ++++++++++++++++----
 client/app/scripts/charts/nodes-chart.js |  2 ++
 client/app/styles/main.less              | 18 ++++++++++++++++++
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index d09089a10..675790c7b 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -44,12 +44,24 @@ const Node = React.createClass({
     const scale = this.props.scale;
     const textOffsetX = 0;
     const textOffsetY = scale(0.5) + 18;
-    const color = this.getNodeColor(this.props.label);
-    const className = this.props.highlighted ? 'node highlighted' : 'node';
+    const isPseudo = !!this.props.pseudo;
+    const color = isPseudo ? '' : this.getNodeColor(this.props.label);
+    const onClick = isPseudo ? null : this.props.onClick;
+    const onMouseEnter = isPseudo ? null : this.handleMouseEnter;
+    const onMouseLeave = isPseudo ? null : this.handleMouseLeave;
+    const classNames = ['node'];
+
+    if (this.props.highlighted) {
+      classNames.push('highlighted');
+    }
+
+    if (this.props.pseudo) {
+      classNames.push('pseudo');
+    }
 
     return (
-      <g className={className} transform={transform} id={this.props.id}
-        onClick={this.props.onClick} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <g className={classNames.join(' ')} transform={transform} id={this.props.id}
+        onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         {this.props.highlighted && <circle r={scale(0.7)} className="highlighted"></circle>}
         <circle r={scale(0.5)} className="border" stroke={color}></circle>
         <circle r={scale(0.45)} className="shadow"></circle>
diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index e77456153..476826b3f 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -86,6 +86,7 @@ const NodesChart = React.createClass({
           key={node.id}
           id={node.id}
           label={node.label}
+          pseudo={node.pseudo}
           subLabel={node.subLabel}
           scale={scale}
           dx={node.x}
@@ -144,6 +145,7 @@ const NodesChart = React.createClass({
         adjacency: node.adjacency,
         id: id,
         label: node.label_major,
+        pseudo: node.pseudo,
         subLabel: node.label_minor,
         degree: _.size(node.adjacency)
       });
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index b4df69bf9..a32740da5 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -178,6 +178,24 @@ body {
 
   g.node {
     cursor: pointer;
+
+    &.pseudo {
+      opacity: 0.8;
+      cursor: default;
+
+      .node-label {
+        fill: @text-secondary-color;
+      }
+
+      .node-sublabel {
+        fill: @text-tertiary-color;
+      }
+
+      .border {
+        stroke: @text-tertiary-color;
+        stroke-width: 1px;
+      }
+    }
   }
 
   .edge {