From 42d4be066e136472ae2e608b3ffb568039de0e17 Mon Sep 17 00:00:00 2001 From: Eve Bright Date: Thu, 6 Apr 2017 10:18:53 +0100 Subject: [PATCH] Show total counts for all labels and rel types in legend --- .../D3Visualization/components/GrassEditor.jsx | 12 +++++++----- .../D3Visualization/components/styled.jsx | 11 +++-------- .../modules/D3Visualization/graphStyle.js | 2 -- src/browser/modules/D3Visualization/mapper.js | 16 ++++++++++++++++ 4 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/browser/modules/D3Visualization/components/GrassEditor.jsx b/src/browser/modules/D3Visualization/components/GrassEditor.jsx index e8e3f67ef70..ad5ae1033cf 100644 --- a/src/browser/modules/D3Visualization/components/GrassEditor.jsx +++ b/src/browser/modules/D3Visualization/components/GrassEditor.jsx @@ -156,21 +156,23 @@ export class GrassEditorComponent extends Component { let pickers let title if (this.props.selectedLabel) { - const styleForLabel = this.graphStyle.forNode({ labels: [this.props.selectedLabel.label] }) + const labelList = this.props.selectedLabel.label !== '*' ? [this.props.selectedLabel.label] : [] + const styleForLabel = this.graphStyle.forNode({ labels: labelList }) const inlineStyle = {'backgroundColor': styleForLabel.get('color'), 'color': styleForLabel.get('text-color-internal')} pickers = [this.colorPicker(styleForLabel.selector, styleForLabel), this.sizePicker(styleForLabel.selector, styleForLabel), this.captionPicker(styleForLabel.selector, styleForLabel, this.props.selectedLabel.propertyKeys)] - title = ({this.props.selectedLabel.label}) + title = ({this.props.selectedLabel.label || '*'}) } else if (this.props.selectedRelType) { - const styleForRelType = this.graphStyle.forRelationship({type: this.props.selectedRelType.relType}) + const relTypeSelector = this.props.selectedRelType.relType !== '*' ? {type: this.props.selectedRelType.relType} : {} + const styleForRelType = this.graphStyle.forRelationship(relTypeSelector) const inlineStyle = {'backgroundColor': styleForRelType.get('color'), 'color': styleForRelType.get('text-color-internal')} pickers = [this.colorPicker(styleForRelType.selector, styleForRelType), this.widthPicker(styleForRelType.selector, styleForRelType), this.captionPicker(styleForRelType.selector, styleForRelType, this.props.selectedRelType.propertyKeys, true)] - title = ({this.props.selectedRelType.relType}) + title = ({this.props.selectedRelType.relType || '*'}) } else { return null } return ( - {title} + {title} {pickers} ) diff --git a/src/browser/modules/D3Visualization/components/styled.jsx b/src/browser/modules/D3Visualization/components/styled.jsx index 2d243a41555..d7afc659ffa 100644 --- a/src/browser/modules/D3Visualization/components/styled.jsx +++ b/src/browser/modules/D3Visualization/components/styled.jsx @@ -21,7 +21,7 @@ import styled from 'styled-components' export const legendRowHeight = 32 -export const inspectorFooterContractedHeight = 21 +export const inspectorFooterContractedHeight = 22 export const StyledSvgWrapper = styled.div` line-height: 0; @@ -188,12 +188,6 @@ export const StyledStatusBar = styled.div` margin-bottom: -39px; ` -// .status-bar .btn-group { -// absolute: top 3px right 12px; -// } -// .status-bar .icon-warning-sign { -// font-size: 18px; -// } export const StyledStatus = styled.div` position: relative; float: left; @@ -276,6 +270,7 @@ export const StyledPickerListItem = styled(StyledInlineListItem)` padding-right: 5px; padding-left: 0; vertical-align: middle; + line-height: 0; ` export const StyledPickerSelector = styled.a` @@ -303,7 +298,7 @@ export const StyledCaptionSelector = styled.a` display: inline-block; padding: 1px 6px; font-size: 12px; - line-height: 12px; + line-height: 1em; color: #9195A0; border: 1px solid #9195A0; overflow: hidden; diff --git a/src/browser/modules/D3Visualization/graphStyle.js b/src/browser/modules/D3Visualization/graphStyle.js index dc7c4a7c194..29636e658a7 100644 --- a/src/browser/modules/D3Visualization/graphStyle.js +++ b/src/browser/modules/D3Visualization/graphStyle.js @@ -43,8 +43,6 @@ export default function neoGraphStyle () { diameter: '10px' }, { diameter: '20px' - }, { - diameter: '35px' }, { diameter: '50px' }, { diff --git a/src/browser/modules/D3Visualization/mapper.js b/src/browser/modules/D3Visualization/mapper.js index db9f661decb..4c662100c64 100644 --- a/src/browser/modules/D3Visualization/mapper.js +++ b/src/browser/modules/D3Visualization/mapper.js @@ -43,6 +43,14 @@ export function getGraphStats (graph) { let relTypeStats = {} graph.nodes().forEach((node) => { node.labels.forEach((label) => { + if (labelStats['*']) { + labelStats['*'].count = labelStats['*'].count + 1 + } else { + labelStats['*'] = { + count: 1, + properties: [] + } + } if (labelStats[label]) { labelStats[label].count = labelStats[label].count + 1 labelStats[label].properties = Object.assign({}, labelStats[label].properties, node.propertyMap) @@ -55,6 +63,14 @@ export function getGraphStats (graph) { }) }) graph.relationships().forEach((rel) => { + if (relTypeStats['*']) { + relTypeStats['*'].count = relTypeStats['*'].count + 1 + } else { + relTypeStats['*'] = { + count: 1, + properties: [] + } + } if (relTypeStats[rel.type]) { relTypeStats[rel.type].count = relTypeStats[rel.type].count + 1 relTypeStats[rel.type].properties = Object.assign({}, relTypeStats[rel.type].properties, rel.propertyMap)