tbouron commented on a change in pull request #255:
URL: https://github.com/apache/brooklyn-ui/pull/255#discussion_r675440092
##########
File path: ui-modules/blueprint-composer/app/views/main/main.controller.js
##########
@@ -110,8 +117,37 @@ export function MainController($scope, $element, $log,
$state, $stateParams, brB
$log.error('Cannot save layers preferences: ' + ex.message);
}
}
+ };
+
+ // Relationship arcs and labels.
+ let isRelationshipArcsLayerActive = true;
+ let isRelationshipLabelsLayerActive = true;
+
+ // Re-apply filters when selected filters changed or graph is changed.
+ $scope.$watch('vm.layers', () => {
+ applyFilters();
+
+ let relationshipArcsLayer = vm.layers.find(l => l.id ===
PATHS_SELECTOR_ID);
+ let relationshipLabelsLayer = vm.layers.find(l => l.id ===
LABELS_SELECTOR_ID);
+
+ // Turning on labels turns on arcs.
+ if (relationshipLabelsLayer.active &&
!isRelationshipLabelsLayerActive) {
+ relationshipArcsLayer.active = true;
+ }
+
+ // Turning off arcs turns off labels.
+ if (!relationshipArcsLayer.active && isRelationshipArcsLayerActive) {
+ relationshipLabelsLayer.active = false;
+ }
+
+ // Update cached state for arc and labels.
+ isRelationshipArcsLayerActive = relationshipArcsLayer.active;
+ isRelationshipLabelsLayerActive = relationshipLabelsLayer.active;
+
}, true);
+ $scope.$on('layers.filter', () => applyFilters());
Review comment:
Why do we need to apply the filter when the graph is redrawn? Sounds
like the logic is backward. The entrypoint is the click on the filters, isn't
it?
##########
File path: ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
##########
@@ -838,11 +833,104 @@ export function D3Blueprint(container, options) {
return `M ${sourceNode.x},${sourceY} A ${dr},${dr} 0
0,${sweep} ${m.x},${m.y}`;
});
- relationData.exit()
+ relationArcs.exit()
.transition()
.duration(_configHolder.transition)
.attr('opacity', 0)
.remove();
+
+ // ====== RELATIONSHIP LABELS =========
+ // Draw relationship labels that follow paths, somewhere in the middle
of paths.
+ // NOTE <textPath/> DECREASES THE UI PERFORMANCE, USE LABELS WITH
CAUTION.
+
+ _relationLabels.selectAll('.' + LABEL_SELECTOR).remove(); // Re-draw
labels every time, required to refresh changes.
+
+ // Group unique labels per path.
+ let labelsPerPath = {};
+ _d3DataHolder.visible.relationships.forEach(d => {
+ const key = getPathId(d);
+ if (!labelsPerPath[key]) {
+ labelsPerPath[key] = new Set();
+ }
+ labelsPerPath[key].add(d.label);
+ });
+
+ const getLabelId = (d) => (getPathId(d) + '-' + d.label);
+ const MAX_LABELS_TO_DISPLAY = 2;
+
+ // Data of unique labels with info about other labels at the same path.
+ let labelsData =
_d3DataHolder.visible.relationships.reduce((accumulator, d) => {
+ const pathKey = getPathId(d);
+ const labelKey = getLabelId(d);
+ const labelsCollectedForPath = Object.keys(accumulator).filter(k
=> k.startsWith(pathKey)).length;
+ if (labelsCollectedForPath <= MAX_LABELS_TO_DISPLAY &&
!accumulator[labelKey]) {
+ accumulator[labelKey] = d;
+ accumulator[labelKey].labels =
Array.from(labelsPerPath[pathKey]); // path labels.
+ accumulator[labelKey].labelIndex = labelsCollectedForPath; //
label index at path.
+ }
+ return accumulator;
+ }, {});
+
+ const CANVAS_COLOR = '#f5f6fa';
+ const OFFSET_RATIO_PX = -12;
Review comment:
Same as above
##########
File path: ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
##########
@@ -771,50 +781,35 @@ export function D3Blueprint(container, options) {
return node;
}
+ /**
+ * Draws new relationships as arcs and labels. Updates existing ones.
+ */
function drawRelationships() {
+
showRelationships();
- let relationData = _relationGroup.selectAll('.relation')
- .data(_d3DataHolder.visible.relationships, (d)=>(d.source._id +
'_related_to_' + d.target._id));
+ const getPathId = ({ source, target }) =>
`${source._id}-${target._id}`;
+ const PATH_SELECTOR = 'relation-arc';
+ const LABEL_SELECTOR = 'relation-label';
Review comment:
[MINOR] The convention up until now is to put constant into the
`_configHolder`
##########
File path: ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
##########
@@ -838,11 +833,104 @@ export function D3Blueprint(container, options) {
return `M ${sourceNode.x},${sourceY} A ${dr},${dr} 0
0,${sweep} ${m.x},${m.y}`;
});
- relationData.exit()
+ relationArcs.exit()
.transition()
.duration(_configHolder.transition)
.attr('opacity', 0)
.remove();
+
+ // ====== RELATIONSHIP LABELS =========
+ // Draw relationship labels that follow paths, somewhere in the middle
of paths.
+ // NOTE <textPath/> DECREASES THE UI PERFORMANCE, USE LABELS WITH
CAUTION.
+
+ _relationLabels.selectAll('.' + LABEL_SELECTOR).remove(); // Re-draw
labels every time, required to refresh changes.
+
+ // Group unique labels per path.
+ let labelsPerPath = {};
+ _d3DataHolder.visible.relationships.forEach(d => {
+ const key = getPathId(d);
+ if (!labelsPerPath[key]) {
+ labelsPerPath[key] = new Set();
+ }
+ labelsPerPath[key].add(d.label);
+ });
+
+ const getLabelId = (d) => (getPathId(d) + '-' + d.label);
+ const MAX_LABELS_TO_DISPLAY = 2;
Review comment:
Same as above
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
