github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 18:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added a semitransparent layer over the background nodes.

Browse Source
This commit is contained in:
Filip Barl
2017-08-04 11:59:27 +02:00
parent 656fbac4e6
commit 038bbbd5ce
8 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/app/scripts/charts/edge.js
View File

@@ -14,9 +14,9 @@ class Edge extends React.Component {
}
render() {
const { id, path, highlighted, blurred, focused, thickness, source, target } = this.props;
const { id, path, highlighted, focused, thickness, source, target } = this.props;
const shouldRenderMarker = (focused || highlighted) && (source !== target);
const className = classNames('edge', { highlighted, blurred });
const className = classNames('edge', { highlighted });
return (
<g

13
client/app/scripts/charts/node-container.js
View File

@@ -6,24 +6,22 @@ import { NODES_SPRING_ANIMATION_CONFIG } from '../constants/animation';
import Node from './node';
const transformedNode = (otherProps, { x, y, k, opacity }) => (
const transformedNode = (otherProps, { x, y, k }) => (
// NOTE: Controlling blurring and transform from here seems to re-render
// faster than adding a CSS class and controlling it from there.
<g transform={`translate(${x},${y}) scale(${k})`} style={{opacity}}>
<g transform={`translate(${x},${y}) scale(${k})`}>
<Node {...otherProps} />
</g>
);
export default class NodeContainer extends React.PureComponent {
render() {
const { dx, dy, isAnimated, scale, blurred, contrastMode } = this.props;
const nodeBlurOpacity = contrastMode ? 0.6 : 0.25;
const forwardedProps = omit(this.props, 'dx', 'dy', 'isAnimated', 'scale', 'blurred');
const opacity = blurred ? nodeBlurOpacity : 1;
const { dx, dy, isAnimated, scale } = this.props;
const forwardedProps = omit(this.props, 'dx', 'dy', 'isAnimated', 'scale');
if (!isAnimated) {
// Show static node for optimized rendering
return transformedNode(forwardedProps, { x: dx, y: dy, k: scale, opacity });
return transformedNode(forwardedProps, { x: dx, y: dy, k: scale });
}
return (
@@ -33,7 +31,6 @@ export default class NodeContainer extends React.PureComponent {
x: spring(dx, NODES_SPRING_ANIMATION_CONFIG),
y: spring(dy, NODES_SPRING_ANIMATION_CONFIG),
k: spring(scale, NODES_SPRING_ANIMATION_CONFIG),
opacity: spring(opacity, NODES_SPRING_ANIMATION_CONFIG),
}}>
{interpolated => transformedNode(forwardedProps, interpolated)}
</Motion>

23
client/app/scripts/charts/nodes-chart-elements.js
View File

@@ -1,6 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { Map as makeMap, List as makeList } from 'immutable';
import { fromJS, Map as makeMap, List as makeList } from 'immutable';
import NodeContainer from './node-container';
import EdgeContainer from './edge-container';
@@ -152,7 +153,6 @@ class NodesChartElements extends React.Component {
matches={node.get('matches')}
networks={node.get('networks')}
metric={node.get('metric')}
blurred={node.get('blurred')}
focused={node.get('focused')}
highlighted={node.get('highlighted')}
shape={node.get('shape')}
@@ -183,7 +183,6 @@ class NodesChartElements extends React.Component {
waypoints={edge.get('points')}
highlighted={edge.get('highlighted')}
focused={edge.get('focused')}
blurred={edge.get('blurred')}
scale={edge.get('scale')}
isAnimated={isAnimated}
/>
@@ -191,6 +190,16 @@ class NodesChartElements extends React.Component {
}
renderElement(element) {
if (element.get('overlay')) {
const className = classNames('nodes-overlay', { active: element.get('active') });
return (
<rect
className={className}
x={-1} y={-1} width={2} height={2}
transform="scale(1000000)"fill="#fff"
/>
);
}
// This heuristics is not ideal but it works.
return element.get('points') ? this.renderEdge(element) : this.renderNode(element);
}
@@ -213,6 +222,11 @@ class NodesChartElements extends React.Component {
.map(this.edgeScaleDecorator)
.groupBy(this.edgeDisplayLayer);
// const orderedElements = makeList([
// edges,
// nodes,
// ]).flatten(true);
// NOTE: The elements need to be arranged into a single array outside
// of DOM structure for React rendering engine to do smart rearrangements
// without unnecessary re-rendering of the elements themselves. So e.g.
@@ -220,6 +234,7 @@ class NodesChartElements extends React.Component {
const orderedElements = makeList([
edges.get(BLURRED_EDGES_LAYER, makeList()),
nodes.get(BLURRED_NODES_LAYER, makeList()),
fromJS([{ overlay: true, active: !!nodes.get(BLURRED_NODES_LAYER) }]),
edges.get(NORMAL_EDGES_LAYER, makeList()),
nodes.get(NORMAL_NODES_LAYER, makeList()),
edges.get(HIGHLIGHTED_EDGES_LAYER, makeList()),
@@ -242,7 +257,7 @@ function mapStateToProps(state) {
hasSelectedNode: hasSelectedNodeFn(state),
layoutNodes: layoutNodesSelector(state),
layoutEdges: layoutEdgesSelector(state),
isAnimated: !graphExceedsComplexityThreshSelector(state),
isAnimated: false && !graphExceedsComplexityThreshSelector(state),
highlightedNodeIds: highlightedNodeIdsSelector(state),
highlightedEdgeIds: highlightedEdgeIdsSelector(state),
selectedNetworkNodesIds: selectedNetworkNodesIdsSelector(state),

1
client/app/scripts/components/node-details.js
View File

@@ -151,6 +151,7 @@ class NodeDetails extends React.Component {
}
renderDetails() {
console.log('render details');
const { details, nodeControlStatus, nodeMatches = makeMap() } = this.props;
const showControls = details.controls && details.controls.length > 0;
const nodeColor = getNodeColorDark(details.rank, details.label, details.pseudo);

2
client/app/scripts/constants/animation.js
View File

@@ -1,3 +1,3 @@
export const NODES_SPRING_ANIMATION_CONFIG = { stiffness: 80, damping: 20, precision: 0.1 };
export const NODES_SPRING_ANIMATION_CONFIG = { stiffness: 200, damping: 25, precision: 1 };
export const NODES_SPRING_FAST_ANIMATION_CONFIG = { stiffness: 800, damping: 50, precision: 1 };