From 5bd8e8f6908d20206eb4ab492f386e58c83cd7d5 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Fri, 10 Feb 2017 12:10:43 +0100 Subject: [PATCH] Renamed 'subLabel' to 'labelMinor' and removed 'node_count' property. --- client/app/scripts/charts/node.js | 24 +++++++++---------- .../app/scripts/charts/nodes-chart-nodes.js | 2 +- client/app/scripts/charts/nodes-chart.js | 2 +- .../app/scripts/components/debug-toolbar.js | 14 ++++------- .../scripts/selectors/nodes-chart-layout.js | 21 ++++------------ client/app/scripts/selectors/nodes.js | 1 - client/app/scripts/utils/search-utils.js | 2 +- client/app/scripts/utils/topology-utils.js | 3 ++- client/app/styles/_base.scss | 16 ++++++------- 9 files changed, 33 insertions(+), 52 deletions(-) diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js index d5a84ce3a..accbf6058 100644 --- a/client/app/scripts/charts/node.js +++ b/client/app/scripts/charts/node.js @@ -18,7 +18,7 @@ import NodeShapeCloud from './node-shape-cloud'; import NodeNetworksOverlay from './node-networks-overlay'; -const labelWidth = 1.4 * NODE_BASE_SIZE; +const labelWidth = 1.2 * NODE_BASE_SIZE; const nodeShapes = { circle: NodeShapeCircle, hexagon: NodeShapeHexagon, @@ -54,20 +54,20 @@ class Node extends React.PureComponent { this.saveShapeRef = this.saveShapeRef.bind(this); } - renderSvgLabels(labelClassName, subLabelClassName, labelOffsetY) { - const { label, subLabel } = this.props; + renderSvgLabels(labelClassName, labelMinorClassName, labelOffsetY) { + const { label, labelMinor } = this.props; return ( {label} - - {subLabel} + + {labelMinor} ); } - renderStandardLabels(labelClassName, subLabelClassName, labelOffsetY, mouseEvents) { - const { label, subLabel, matches = makeMap() } = this.props; + renderStandardLabels(labelClassName, labelMinorClassName, labelOffsetY, mouseEvents) { + const { label, labelMinor, matches = makeMap() } = this.props; const matchedMetadata = matches.get('metadata', makeList()); const matchedParents = matches.get('parents', makeList()); const matchedNodeDetails = matchedMetadata.concat(matchedParents); @@ -83,8 +83,8 @@ class Node extends React.PureComponent {
-
- +
+
@@ -108,7 +108,7 @@ class Node extends React.PureComponent { }); const labelClassName = classnames('node-label', { truncate }); - const subLabelClassName = classnames('node-sublabel', { truncate }); + const labelMinorClassName = classnames('node-label-minor', { truncate }); const NodeShapeType = getNodeShape(this.props); const mouseEvents = { @@ -120,8 +120,8 @@ class Node extends React.PureComponent { return ( {exportingGraph ? - this.renderSvgLabels(labelClassName, subLabelClassName, labelOffsetY) : - this.renderStandardLabels(labelClassName, subLabelClassName, labelOffsetY, mouseEvents)} + this.renderSvgLabels(labelClassName, labelMinorClassName, labelOffsetY) : + this.renderStandardLabels(labelClassName, labelMinorClassName, labelOffsetY, mouseEvents)} diff --git a/client/app/scripts/charts/nodes-chart-nodes.js b/client/app/scripts/charts/nodes-chart-nodes.js index 4f9a837d0..caed5a42f 100644 --- a/client/app/scripts/charts/nodes-chart-nodes.js +++ b/client/app/scripts/charts/nodes-chart-nodes.js @@ -57,8 +57,8 @@ class NodesChartNodes extends React.Component { key={node.get('id')} id={node.get('id')} label={node.get('label')} + labelMinor={node.get('labelMinor')} pseudo={node.get('pseudo')} - subLabel={node.get('subLabel')} metric={nodeMetrics.get(node.get('id'))} rank={node.get('rank')} isAnimated={isAnimated} diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js index 2718d47d5..c0d3263ad 100644 --- a/client/app/scripts/charts/nodes-chart.js +++ b/client/app/scripts/charts/nodes-chart.js @@ -17,7 +17,7 @@ import { layoutWithSelectedNode } from '../selectors/nodes-chart-focus'; import { graphLayout } from '../selectors/nodes-chart-layout'; -const GRAPH_COMPLEXITY_NODES_TRESHOLD = 200; +const GRAPH_COMPLEXITY_NODES_TRESHOLD = 100; const ZOOM_CACHE_FIELDS = [ 'panTranslateX', 'panTranslateY', 'zoomScale', 'minZoomScale', 'maxZoomScale' diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js index ad7b6cd09..5ccc23027 100644 --- a/client/app/scripts/components/debug-toolbar.js +++ b/client/app/scripts/components/debug-toolbar.js @@ -2,7 +2,7 @@ import React from 'react'; import Perf from 'react-addons-perf'; import { connect } from 'react-redux'; -import { sampleSize, sample, random, range, flattenDeep } from 'lodash'; +import { sampleSize, sample, random, range, flattenDeep, times } from 'lodash'; import { fromJS, Set as makeSet } from 'immutable'; import { hsl } from 'd3-color'; import debug from 'debug'; @@ -13,7 +13,6 @@ import { getNodeColor, getNodeColorDark, text2degree } from '../utils/color-util const SHAPES = ['square', 'hexagon', 'heptagon', 'circle']; -const NODE_COUNTS = [1, 2, 3]; const STACK_VARIANTS = [false, true]; const METRIC_FILLS = [0, 0.1, 50, 99.9, 100]; const NETWORKS = [ @@ -42,15 +41,11 @@ const LABEL_PREFIXES = range('A'.charCodeAt(), 'Z'.charCodeAt() + 1) .map(n => String.fromCharCode(n)); -const deltaAdd = ( - name, adjacency = [], shape = 'circle', stack = false, nodeCount = 1, - networks = NETWORKS -) => ({ +const deltaAdd = (name, adjacency = [], shape = 'circle', stack = false, networks = NETWORKS) => ({ adjacency, controls: {}, shape, stack, - node_count: nodeCount, id: name, label: name, labelMinor: name, @@ -82,8 +77,8 @@ function label(shape, stacked) { function addAllVariants(dispatch) { const newNodes = flattenDeep(STACK_VARIANTS.map(stack => (SHAPES.map((s) => { - if (!stack) return [deltaAdd(label(s, stack), [], s, stack, 1)]; - return NODE_COUNTS.map(n => deltaAdd(label(s, stack), [], s, stack, n)); + if (!stack) return [deltaAdd(label(s, stack), [], s, stack)]; + return times(3).map(() => deltaAdd(label(s, stack), [], s, stack)); })))); dispatch(receiveNodesDelta({ @@ -262,7 +257,6 @@ class DebugToolbar extends React.Component { sampleArray(allNodes), sample(SHAPES), sample(STACK_VARIANTS), - sample(NODE_COUNTS), sampleArray(NETWORKS, 10) )); } diff --git a/client/app/scripts/selectors/nodes-chart-layout.js b/client/app/scripts/selectors/nodes-chart-layout.js index bb61cf8da..894c97492 100644 --- a/client/app/scripts/selectors/nodes-chart-layout.js +++ b/client/app/scripts/selectors/nodes-chart-layout.js @@ -83,22 +83,9 @@ export const graphLayout = createSelector( // computed property, but this is still useful. log(`graph layout calculation took ${timedLayouter.time}ms`); - const layoutEdges = graph.edges; - const layoutNodes = graph.nodes.map(node => makeMap({ - x: node.get('x'), - y: node.get('y'), - id: node.get('id'), - label: node.get('label'), - pseudo: node.get('pseudo'), - subLabel: node.get('labelMinor'), - nodeCount: node.get('node_count'), - metrics: node.get('metrics'), - rank: node.get('rank'), - shape: node.get('shape'), - stack: node.get('stack'), - // networks: node.get('networks'), - })); - - return { layoutNodes, layoutEdges }; + return { + layoutNodes: graph.nodes, + layoutEdges: graph.edges, + }; } ); diff --git a/client/app/scripts/selectors/nodes.js b/client/app/scripts/selectors/nodes.js index 8bf9fd588..f6470b768 100644 --- a/client/app/scripts/selectors/nodes.js +++ b/client/app/scripts/selectors/nodes.js @@ -19,7 +19,6 @@ export const nodeAdjacenciesSelector = createSelector( label: node.get('label'), pseudo: node.get('pseudo'), subLabel: node.get('labelMinor'), - nodeCount: node.get('node_count'), metrics: node.get('metrics'), rank: node.get('rank'), shape: node.get('shape'), diff --git a/client/app/scripts/utils/search-utils.js b/client/app/scripts/utils/search-utils.js index 761421944..51ec0aa1d 100644 --- a/client/app/scripts/utils/search-utils.js +++ b/client/app/scripts/utils/search-utils.js @@ -7,7 +7,7 @@ import { slugify } from './string-utils'; // topolevel search fields const SEARCH_FIELDS = makeMap({ label: 'label', - sublabel: 'labelMinor' + labelMinor: 'labelMinor' }); const COMPARISONS = makeMap({ diff --git a/client/app/scripts/utils/topology-utils.js b/client/app/scripts/utils/topology-utils.js index df4dab82a..80aca9e5a 100644 --- a/client/app/scripts/utils/topology-utils.js +++ b/client/app/scripts/utils/topology-utils.js @@ -175,7 +175,8 @@ export function getCurrentTopologyUrl(state) { } export function isNodeMatchingQuery(node, query) { - return node.get('label').includes(query) || node.get('subLabel').includes(query); + return node.get('label').includes(query) || + node.get('labelMinor').includes(query); } export function graphExceedsComplexityThresh(stats) { diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index 7e8c7a83e..d820c3f8b 100644 --- a/client/app/styles/_base.scss +++ b/client/app/styles/_base.scss @@ -308,14 +308,14 @@ // stroke-width: 4px; } - .node-sublabel { - line-height: 125%; - } - .node-label { color: $text-color; } + .node-label-minor { + line-height: 125%; + } + .node-labels-container { transform: scale($node-text-scale); pointer-events: none; @@ -346,12 +346,12 @@ width: 100%; } - .node-sublabel { + .node-label-minor { color: $text-secondary-color; font-size: 0.85em; } - .node-label, .node-sublabel { + .node-label, .node-label-minor { span { border-radius: 2px; } @@ -374,7 +374,7 @@ fill: $text-secondary-color; } - .node-sublabel { + .node-label-minor { fill: $text-tertiary-color; } @@ -396,7 +396,7 @@ animation: throb 0.5s $base-ease; } - .node-label, .node-sublabel { + .node-label, .node-label-minor { text-align: center; }