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

Merge pull request #1812 from weaveworks/1760-fixes-node-label-overlap

Browse Source 
Fixes node label overlap
This commit is contained in:
Simon
2016-08-18 16:09:59 +02:00
committed by GitHub
parent 250baa2524 e73440e9f1
commit 5c27063c56
4 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/app/scripts/charts/node.js
+1 -1
View File
@@ -93,7 +93,7 @@ class Node extends React.Component {
const truncate = !focused && !hovered;
const labelWidth = nodeScale(scaleFactor * 3);
const labelOffsetX = -labelWidth / 2;
const labelDy = (showingNetworks && networks) ? 0.75 : 0.60;
const labelDy = (showingNetworks && networks) ? 0.70 : 0.55;
const labelOffsetY = nodeScale(labelDy * scaleFactor);
const networkOffset = nodeScale(scaleFactor * 0.67);
client/app/scripts/charts/nodes-chart.js
+3 -2
View File
@@ -8,7 +8,7 @@ import timely from 'timely';
import { clickBackground } from '../actions/app-actions';
import { EDGE_ID_SEPARATOR } from '../constants/naming';
import { DETAILS_PANEL_WIDTH, MAX_NODE_SIZE } from '../constants/styles';
import { MIN_NODE_SIZE, DETAILS_PANEL_WIDTH, MAX_NODE_SIZE } from '../constants/styles';
import Logo from '../components/logo';
import { doLayout } from './nodes-layout';
import NodesChartElements from './nodes-chart-elements';
@@ -371,7 +371,8 @@ class NodesChart extends React.Component {
const expanse = Math.min(height, width);
const nodeSize = expanse / 3; // single node should fill a third of the screen
const maxNodeSize = Math.min(MAX_NODE_SIZE, expanse / 10);
const normalizedNodeSize = Math.min(nodeSize / Math.sqrt(nodes.size), maxNodeSize);
const normalizedNodeSize = Math.max(MIN_NODE_SIZE,
Math.min(nodeSize / Math.sqrt(nodes.size), maxNodeSize));
return this.state.nodeScale.copy().range([0, normalizedNodeSize]);
}
client/app/scripts/constants/styles.js
+2 -1
View File
@@ -22,6 +22,7 @@ export const CANVAS_MARGINS = {
// The base size the shapes were defined at matches nicely w/ a 14px font.
//
export const BASE_NODE_SIZE = 64;
export const MIN_NODE_SIZE = 24;
export const MAX_NODE_SIZE = 96;
export const BASE_NODE_LABEL_SIZE = 14;
export const MIN_NODE_LABEL_SIZE = BASE_NODE_LABEL_SIZE;
export const MIN_NODE_LABEL_SIZE = 12;
client/app/styles/main.less
+8 -8
View File
@@ -361,7 +361,6 @@ h2 {
// stroke-width: 4px;
}
.node-label,
.node-sublabel {
line-height: 125%;
}
@@ -371,7 +370,6 @@ h2 {
}
.node-label-wrapper {
//
// Base line height doesn't hop across foreignObject =/
//
@@ -398,16 +396,18 @@ h2 {
font-size: 0.85em;
}
&.hovered {
.node-label, .node-sublabel {
span:not(.match) {
background-color: fade(@background-average-color, 70%);
}
.node-label, .node-sublabel {
span {
border-radius: 2px;
}
.matched-results {
span:not(.match) {
padding: 0 0.25em;
background-color: fade(@background-average-color, 70%);
}
}
.matched-results {
background-color: fade(@background-average-color, 70%);
}
&.pseudo {
cursor: default;