diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index 2a13d35eb..e42e239a0 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -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]); } diff --git a/client/app/scripts/constants/styles.js b/client/app/scripts/constants/styles.js index 290cc0043..a5d4d5e99 100644 --- a/client/app/scripts/constants/styles.js +++ b/client/app/scripts/constants/styles.js @@ -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; diff --git a/client/app/styles/main.less b/client/app/styles/main.less index c03e953b7..e2da1eed5 100644 --- a/client/app/styles/main.less +++ b/client/app/styles/main.less @@ -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;