From f46025fe101ccd0041e99fa475a2fb6193e3a87c Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 12 Jul 2016 15:45:35 +0200 Subject: [PATCH 1/4] Fixes network bars position when a node is selected. Bar position should be a function of node size! Note: This is still an estimated position though it looks fine. Would be nice to take into account size of labels (foreignObjects). The transforms (for "undoing" the canvas zoom level) are a bit hectic here and would be really nice to pull out and put in a wrapper...) --- client/app/scripts/charts/node-networks-overlay.js | 6 +----- client/app/scripts/charts/node.js | 4 +++- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/client/app/scripts/charts/node-networks-overlay.js b/client/app/scripts/charts/node-networks-overlay.js index 22a371353..c59f794ea 100644 --- a/client/app/scripts/charts/node-networks-overlay.js +++ b/client/app/scripts/charts/node-networks-overlay.js @@ -6,17 +6,13 @@ import { isContrastMode } from '../utils/contrast-utils'; const barHeight = 5; -const barMarginTop = 6; -const labelHeight = 32; // Gap size between bar segments. const padding = 0.05; const rx = 1; const ry = rx; const x = d3.scale.ordinal(); -function NodeNetworksOverlay({labelOffsetY, size, stack, networks = makeList()}) { - const offset = labelOffsetY + labelHeight + barMarginTop; - +function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) { // Min size is about a quarter of the width, feels about right. const minBarWidth = (size / 4); const barWidth = Math.max(size, minBarWidth * networks.size); diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index 2ff1b47c1..cb8cb6115 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -104,6 +104,8 @@ class Node extends React.Component { const NodeShapeType = getNodeShape(this.props); const useSvgLabels = exportingGraph; const size = nodeScale(scaleFactor); + const networkOffset = focused ? size + size * 0.10 : size + size * 0.25; + return ( @@ -133,7 +135,7 @@ class Node extends React.Component { {...this.props} /> - {showingNetworks && } ); From 6f8dc22ca308d23492154dbf975475f84785ebdc Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 12 Jul 2016 16:09:10 +0200 Subject: [PATCH 2/4] Move network bar above the label for now. Positioning the bar in the middle of flowing text is a bit tricky. --- client/app/scripts/charts/node.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index cb8cb6115..c774175e5 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -87,7 +87,7 @@ class Node extends React.Component { const labelTransform = focused ? `scale(${1 / zoomScale})` : ''; const labelWidth = nodeScale(scaleFactor * 4); const labelOffsetX = -labelWidth / 2; - const labelOffsetY = focused ? nodeScale(0.5) : nodeScale(0.5 * scaleFactor); + let labelOffsetY = focused ? nodeScale(0.5) : nodeScale(0.5 * scaleFactor); const nodeClassName = classnames('node', { highlighted, @@ -99,12 +99,14 @@ class Node extends React.Component { const labelClassName = classnames('node-label', { truncate }); const subLabelClassName = classnames('node-sublabel', { truncate }); - const matchedResultsStyle = showingNetworks ? { marginTop: 6 } : null; const NodeShapeType = getNodeShape(this.props); const useSvgLabels = exportingGraph; const size = nodeScale(scaleFactor); - const networkOffset = focused ? size + size * 0.10 : size + size * 0.25; + const networkOffset = nodeScale(scaleFactor * 0.65); + if (showingNetworks) { + labelOffsetY += (focused ? 12 : 8); + } return ( - {!blurred && } + {!blurred && } } From 6a79938939d082609a9fc94a091e889b99fcb61e Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 12 Jul 2016 16:10:56 +0200 Subject: [PATCH 3/4] Correct label position for nodes that don't have networks. --- client/app/scripts/charts/node.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index c774175e5..7a0b2556b 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -104,7 +104,7 @@ class Node extends React.Component { const useSvgLabels = exportingGraph; const size = nodeScale(scaleFactor); const networkOffset = nodeScale(scaleFactor * 0.65); - if (showingNetworks) { + if (showingNetworks && networks) { labelOffsetY += (focused ? 12 : 8); } From 55bed7b7b6020078a80978a1474c49b7bfb6d4f2 Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Tue, 12 Jul 2016 18:29:15 +0200 Subject: [PATCH 4/4] A couple more tweaks to the network-bar position. - Center it vertically properly. --- client/app/scripts/charts/node-networks-overlay.js | 5 +++-- client/app/scripts/charts/node.js | 8 +++----- client/app/styles/main.less | 1 - 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/client/app/scripts/charts/node-networks-overlay.js b/client/app/scripts/charts/node-networks-overlay.js index c59f794ea..b09dcac2e 100644 --- a/client/app/scripts/charts/node-networks-overlay.js +++ b/client/app/scripts/charts/node-networks-overlay.js @@ -5,8 +5,8 @@ import { getNetworkColor } from '../utils/color-utils'; import { isContrastMode } from '../utils/contrast-utils'; -const barHeight = 5; // Gap size between bar segments. +const minBarHeight = 3; const padding = 0.05; const rx = 1; const ry = rx; @@ -16,6 +16,7 @@ function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) { // Min size is about a quarter of the width, feels about right. const minBarWidth = (size / 4); const barWidth = Math.max(size, minBarWidth * networks.size); + const barHeight = Math.max(size * 0.085, minBarHeight); // Update singleton scale. x.domain(networks.map((n, i) => i).toJS()); @@ -24,7 +25,7 @@ function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) { const bars = networks.map((n, i) => (