Revert "Bring shapes into the details panel and use them for view-in-topo"

This reverts commit 1bf54130ffb4e6c83f0bd816f7a037f819d561ac.

client/app/scripts/charts/node-shape-circle.js

@@ -4,11 +4,11 @@ import {getMetricValue, getMetricColor, getClipPathDefinition} from '../utils/me
 import {CANVAS_METRIC_FONT_SIZE} from '../constants/styles.js';
 
 
-export default function NodeShapeCircle({id, highlighted, size, color, metric, wireframe}) {
+export default function NodeShapeCircle({id, highlighted, size, color, metric}) {
   const clipId = `mask-${id}`;
   const {height, hasMetric, formattedValue} = getMetricValue(metric, size);
   const metricStyle = { fill: getMetricColor(metric) };
-  const className = classNames('shape', { metrics: hasMetric, wireframe });
+  const className = classNames('shape', { metrics: hasMetric });
   const fontSize = size * CANVAS_METRIC_FONT_SIZE;
 
   return (
@@ -21,7 +21,7 @@ export default function NodeShapeCircle({id, highlighted, size, color, metric, w
         clipPath={`url(#${clipId})`} />}
       {highlighted && hasMetric ?
         <text style={{fontSize}}>{formattedValue}</text> :
-        <circle className="node" stroke={color} fill={color} r={Math.max(2, (size * 0.125))} />}
+        <circle className="node" r={Math.max(2, (size * 0.125))} />}
     </g>
   );
 }

client/app/scripts/charts/node-shape-hex.js

@@ -30,7 +30,7 @@ function getPoints(h) {
 }
 
 
-export default function NodeShapeHex({id, highlighted, size, color, metric, wireframe}) {
+export default function NodeShapeHex({id, highlighted, size, color, metric}) {
   const pathProps = v => ({
     d: getPoints(size * v * 2),
     transform: `rotate(90) translate(-${size * getWidth(v)}, -${size * v})`
@@ -42,7 +42,7 @@ export default function NodeShapeHex({id, highlighted, size, color, metric, wire
   const clipId = `mask-${id}`;
   const {height, hasMetric, formattedValue} = getMetricValue(metric, size);
   const metricStyle = { fill: getMetricColor(metric) };
-  const className = classNames('shape', { metrics: hasMetric, wireframe });
+  const className = classNames('shape', { metrics: hasMetric });
   const fontSize = size * CANVAS_METRIC_FONT_SIZE;
 
   return (
@@ -58,7 +58,7 @@ export default function NodeShapeHex({id, highlighted, size, color, metric, wire
         <text style={{fontSize}}>
           {formattedValue}
         </text> :
-        <circle className="node" fill={color} stroke={color} r={Math.max(2, (size * 0.125))} />}
+        <circle className="node" r={Math.max(2, (size * 0.125))} />}
     </g>
   );
 }

client/app/scripts/charts/node-shape-square.js

@@ -5,7 +5,7 @@ import {CANVAS_METRIC_FONT_SIZE} from '../constants/styles.js';
 
 
 export default function NodeShapeSquare({
-  id, highlighted, size, color, rx = 0, ry = 0, metric, wireframe
+  id, highlighted, size, color, rx = 0, ry = 0, metric
 }) {
   const rectProps = (scale, radiusScale) => ({
     width: scale * size * 2,
@@ -19,7 +19,7 @@ export default function NodeShapeSquare({
   const clipId = `mask-${id}`;
   const {height, hasMetric, formattedValue} = getMetricValue(metric, size);
   const metricStyle = { fill: getMetricColor(metric) };
-  const className = classNames('shape', { metrics: hasMetric, wireframe });
+  const className = classNames('shape', { metrics: hasMetric });
   const fontSize = size * CANVAS_METRIC_FONT_SIZE;
 
   return (
@@ -34,7 +34,7 @@ export default function NodeShapeSquare({
         <text style={{fontSize}}>
           {formattedValue}
         </text> :
-        <circle className="node" stroke={color} fill={color} r={Math.max(2, (size * 0.125))} />}
+        <circle className="node" r={Math.max(2, (size * 0.125))} />}
     </g>
   );
 }

client/app/scripts/charts/node-shape-stack.js

@@ -14,13 +14,15 @@ export default function NodeShapeStack(props) {
       <g transform={`scale(${hls})translate(${dx}, ${dy})`} className="onlyHighlight">
         <Shape {...props} />
       </g>
-      <g className="noNode" transform={`translate(${dx * 2}, ${dy * 2})`}>
+      <g transform={`translate(${dx * 2}, ${dy * 2})`}>
         <Shape {...props} />
       </g>
-      <g className="noNode" transform={`translate(${dx * 1}, ${dy * 1})`}>
+      <g transform={`translate(${dx * 1}, ${dy * 1})`}>
+        <Shape {...props} />
+      </g>
+      <g className="onlyMetrics">
         <Shape {...props} />
       </g>
-      <Shape {...props} />
     </g>
   );
 }

client/app/scripts/charts/node.js

@@ -36,7 +36,7 @@ const nodeShapes = {
   cloud: NodeShapeCloud
 };
 
-export function getNodeShape({ shape, stack }) {
+function getNodeShape({ shape, stack }) {
   const nodeShape = nodeShapes[shape];
   if (!nodeShape) {
     throw new Error(`Unknown shape: ${shape}!`);
@@ -142,7 +142,7 @@ class Node extends React.Component {
             </div>
           </foreignObject>}
 
-        <g {...mouseEvents} ref={this.saveShapeRef} style={{cursor: 'pointer'}}>
+        <g {...mouseEvents} ref={this.saveShapeRef}>
           <NodeShapeType
             size={size}
             color={color}

client/app/scripts/components/node-details.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import classnames from 'classnames';
 import { connect } from 'react-redux';
 import { Map as makeMap } from 'immutable';
 
@@ -15,7 +14,6 @@ import NodeDetailsLabels from './node-details/node-details-labels';
 import NodeDetailsRelatives from './node-details/node-details-relatives';
 import NodeDetailsTable from './node-details/node-details-table';
 import Warning from './warning';
-import { getNodeShape } from '../charts/node';
 
 function getTruncationText(count) {
   return 'This section was too long to be handled efficiently and has been truncated'
@@ -26,21 +24,8 @@ export class NodeDetails extends React.Component {
 
   constructor(props, context) {
     super(props, context);
-    this.state = {
-      highlighted: false
-    };
     this.handleClickClose = this.handleClickClose.bind(this);
     this.handleShowTopologyForNode = this.handleShowTopologyForNode.bind(this);
-    this.handleNodeMouseEnter = this.handleNodeMouseEnter.bind(this);
-    this.handleNodeMouseLeave = this.handleNodeMouseLeave.bind(this);
-  }
-
-  handleNodeMouseEnter() {
-    this.setState({ highlighted: true });
-  }
-
-  handleNodeMouseLeave() {
-    this.setState({ highlighted: false });
   }
 
   handleClickClose(ev) {
@@ -50,7 +35,6 @@ export class NodeDetails extends React.Component {
 
   handleShowTopologyForNode(ev) {
     ev.preventDefault();
-    this.setState({ highlighted: false });
     this.props.clickShowTopologyForNode(this.props.topologyId, this.props.nodeId);
   }
 
@@ -63,9 +47,14 @@ export class NodeDetails extends React.Component {
   }
 
   renderTools() {
+    const showSwitchTopology = this.props.nodeId !== this.props.selectedNodeId;
+    const topologyTitle = `View ${this.props.label} in ${this.props.topologyId}`;
+
     return (
       <div className="node-details-tools-wrapper">
         <div className="node-details-tools">
+          {showSwitchTopology && <span title={topologyTitle}
+            className="fa fa-exchange" onClick={this.handleShowTopologyForNode} />}
           <span title="Close details" className="fa fa-close" onClick={this.handleClickClose} />
         </div>
       </div>
@@ -149,60 +138,30 @@ export class NodeDetails extends React.Component {
     const { details, nodeControlStatus, nodeMatches = makeMap() } = this.props;
     const showControls = details.controls && details.controls.length > 0;
     const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo);
-    const controlsColor = brightenColor(nodeColor);
     const {error, pending} = nodeControlStatus ? nodeControlStatus.toJS() : {};
     const tools = this.renderTools();
     const styles = {
       controls: {
-        backgroundColor: controlsColor,
+        backgroundColor: brightenColor(nodeColor)
       },
       header: {
         backgroundColor: nodeColor
       }
     };
-    const NodeShapeType = getNodeShape(details);
-    const shapeMarginTop = details.stack ? -20 : -27;
-    const topologyTitle = `View ${this.props.label} in ${this.props.topologyId}`;
-    const showSwitchTopology = this.props.nodeId !== this.props.selectedNodeId;
-    const highlighted = this.state.highlighted;
-
-    const commonProps = {
-      onClick: this.handleShowTopologyForNode,
-      onMouseEnter: showSwitchTopology && this.handleNodeMouseEnter,
-      onMouseLeave: showSwitchTopology && this.handleNodeMouseLeave,
-      style: {
-        cursor: showSwitchTopology && 'pointer',
-      },
-    };
-    const headerClassName = classnames('node-details-header', {
-      'show-switch-topology': showSwitchTopology,
-    });
 
     return (
       <div className="node-details">
         {tools}
-        <div className={headerClassName} style={styles.header}>
+        <div className="node-details-header" style={styles.header}>
           <div className="node-details-header-wrapper">
-            <svg style={{width: 64, height: 84, marginTop: shapeMarginTop }} >
-              <g
-                className={classnames({highlighted})}
-                transform={`translate(32, 48) scale(${44 / 64})`}
-                {...commonProps}
-              >
-                {showSwitchTopology && <title>{topologyTitle}</title>}
-                <NodeShapeType id={this.props.nodeId} size={64} color={controlsColor}
-                  highlighted={highlighted} wireframe={!showSwitchTopology} />
-              </g>
-            </svg>
-            <h2
-              className="node-details-header-label truncate"
-              title={showSwitchTopology ? topologyTitle : details.label}
-              {...commonProps}>
+            <h2 className="node-details-header-label truncate" title={details.label}>
               <MatchedText text={details.label} match={nodeMatches.get('label')} />
             </h2>
-            {details.parents && <NodeDetailsRelatives
-              matches={nodeMatches.get('parents')}
-              relatives={details.parents} />}
+            <div className="node-details-header-relatives">
+              {details.parents && <NodeDetailsRelatives
+                matches={nodeMatches.get('parents')}
+                relatives={details.parents} />}
+            </div>
           </div>
         </div>
 

client/app/styles/main.less

@@ -482,105 +482,77 @@ h2 {
       }
     }
   }
-}
 
-//
-// stacks and shapes!!!
-//
-
-.stack .shape .highlighted {
-  display: none;
-}
-
-.stack .onlyHighlight .shape  {
-  .border { display: none; }
-  .shadow { display: none; }
-  .node { display: none; }
-  .highlighted { display: inline; }
-}
-
-.stack .shape .metric-fill {
-  display: none;
-}
-
-.shape {
-  transform: scale(1);
-
-  /* cloud paths have stroke-width set dynamically */
-  &:not(.shape-cloud) .border {
-    stroke-width: @node-border-stroke-width;
-    fill: @background-color;
-    transition: stroke-opacity 0.333s @base-ease, fill 0.333s @base-ease;
-    stroke-opacity: 1;
+  .stack .shape .highlighted {
+    display: none;
   }
 
-  &.metrics .border {
-    fill: @background-lighter-color;
-    stroke-opacity: 0.3;
+  .stack .onlyHighlight .shape  {
+    .border { display: none; }
+    .shadow { display: none; }
+    .node { display: none; }
+    .highlighted { display: inline; }
   }
 
-  .metric-fill {
-    stroke: none;
-    fill: #A0BE7E;
-    fill-opacity: 0.7;
+  .stack .shape .metric-fill {
+    display: none;
   }
 
-  .shadow {
-    stroke: none;
-    fill: @background-lighter-color;
+  .shape {
+    transform: scale(1);
+    cursor: pointer;
+
+    /* cloud paths have stroke-width set dynamically */
+    &:not(.shape-cloud) .border {
+      stroke-width: @node-border-stroke-width;
+      fill: @background-color;
+      transition: stroke-opacity 0.333s @base-ease, fill 0.333s @base-ease;
+      stroke-opacity: 1;
+    }
+
+    &.metrics .border {
+      fill: @background-lighter-color;
+      stroke-opacity: 0.3;
+    }
+
+    .metric-fill {
+      stroke: none;
+      fill: #A0BE7E;
+      fill-opacity: 0.7;
+    }
+
+    .shadow {
+      stroke: none;
+      fill: @background-lighter-color;
+    }
+
+    .node {
+      fill: @text-color;
+      stroke: @background-lighter-color;
+      stroke-width: 2px;
+    }
+
+    text {
+      font-size: 12px;
+      dominant-baseline: middle;
+      text-anchor: middle;
+    }
+
+    .highlighted {
+      fill: @weave-blue;
+      fill-opacity: @node-highlight-fill-opacity;
+      stroke: @weave-blue;
+      stroke-width: @node-highlight-stroke-width;
+      stroke-opacity: @node-highlight-stroke-opacity;
+    }
   }
 
-  text {
-    font-size: 12px;
-    dominant-baseline: middle;
-    text-anchor: middle;
+  .stack .shape .border {
+    stroke-width: @node-border-stroke-width - 0.5;
   }
 
-  .highlighted {
-    fill: @weave-blue;
-    fill-opacity: @node-highlight-fill-opacity;
-    stroke: @weave-blue;
-    stroke-width: @node-highlight-stroke-width;
-    stroke-opacity: @node-highlight-stroke-opacity;
-  }
 }
 
-.shape.wireframe  {
-  .shadow, .border {
-    fill-opacity: 0;
-  }
-
-  .border {
-    stroke: white;
-  }
-
-  .node {
-    fill: white;
-    stroke: white;
-    // fill-opacity: 0.9;
-    // stroke-opacity: 0.9;
-  }
-}
-
-.noNode .wireframe .node {
-  display: none;
-}
-
-.stack .shape .border {
-  stroke-width: @node-border-stroke-width - 0.5;
-}
-
-.shape:not(.wireframe) .node {
-  fill: @text-color;
-  stroke: @background-lighter-color;
-  stroke-width: 2px;
-}
-
-
-// ----
-
-
-
 .matched-results {
   text-align: center;
 
@@ -671,28 +643,17 @@ h2 {
   &-header {
     .colorable;
 
-    &.show-switch-topology &-label {
-      .btn-opacity;
-      opacity: 0.8;
-      &:hover {
-        opacity: 1;
-      }
-    }
-
     &-wrapper {
-      padding: 36px 36px 8px 24px;
+      padding: 36px 36px 8px 36px;
     }
 
     &-label {
       color: white;
-      margin: 0 0 0 64px;
+      margin: 0;
+      width: 348px;
       padding-top: 0;
     }
 
-    svg {
-      float: left;
-    }
-
     .details-tools {
       position: absolute;
       top: 16px;
@@ -706,7 +667,6 @@ h2 {
   }
 
   &-relatives {
-    margin-left: 64px;
     margin-top: 4px;
     font-size: 120%;
     color: @white;