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

Tweak node/label-sizes to avoid overlap in certain layouts.

Browse Source 
- Also permanently enables the label bg (previous was only on hover) to
  aid readibility w/ the (sometimes) smaller labels.
This commit is contained in:
Simon Howe
2016-08-17 15:53:41 +02:00
parent 250baa2524
commit 86101764b6
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/app/scripts/charts/nodes-chart.js
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]);
}

3
client/app/scripts/constants/styles.js
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;

14
client/app/styles/main.less
View File

@@ -398,16 +398,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 {
padding: 0 0.25em;
border-radius: 2px;
}
.matched-results {
span:not(.match) {
background-color: fade(@background-average-color, 70%);
}
}
.matched-results {
background-color: fade(@background-average-color, 70%);
}
&.pseudo {
cursor: default;