algairim commented on a change in pull request #255:
URL: https://github.com/apache/brooklyn-ui/pull/255#discussion_r675455327
##########
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:
Addressed in 94485d2c28c48a6aadb92f167fddc284eab02e8f.
##########
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:
Addressed in 94485d2c28c48a6aadb92f167fddc284eab02e8f.
##########
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:
Addressed in 94485d2c28c48a6aadb92f167fddc284eab02e8f.
--
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]
