ahgittin commented on a change in pull request #232:
URL: https://github.com/apache/brooklyn-ui/pull/232#discussion_r656937834
##########
File path: ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
##########
@@ -776,11 +776,39 @@ export function D3Blueprint(container, options) {
let relationData = _relationGroup.selectAll('.relation')
.data(_d3DataHolder.visible.relationships, (d)=>(d.source._id +
'_related_to_' + d.target._id));
- relationData.enter().insert('path')
+ let relationDataEntered = relationData.enter();
+
+ // Draw the relationship path
+ relationDataEntered.insert('path')
.attr('class', 'relation')
+ .attr('id', (d)=>(d.source._id + '-' + d.target._id))
.attr('opacity', 0)
.attr('from', (d)=>(d.source._id))
.attr('to', (d)=>(d.target._id));
+
+ // Draw the relationship label that follows the path, somewhere in the
middle.
+ // NOTE `textPath` DECREASES THE UI PERFORMANCE, USE LABELS WITH
CAUTION.
+ relationDataEntered.insert('text') // Add text layer of '█'s to
erase the area on the path.
+ .attr('dominant-baseline', 'middle')
+ .attr('text-anchor', 'middle')
+ .attr('font-family', 'monospace')
+ .attr('fill', '#f5f6fa')
+ .insert('textPath')
+ .attr('hidden', (d) => (d.label ? null : ''))
+ .attr('xlink:href', (d)=>('#' + d.source._id + '-' +
d.target._id))
+ .attr('startOffset', '59%')
+ .html((d) => (d.label ? '█'.repeat(d.label.length + 2) :
null));
+ relationDataEntered.insert('text') // Add label text on top of
'█'s which is on top of the path.
+ .attr('dominant-baseline', 'middle')
+ .attr('text-anchor', 'middle')
+ .attr('font-family', 'monospace')
+ .insert('textPath')
+ .attr('hidden', (d) => (d.label ? null : ''))
+ .attr('xlink:href', (d)=>('#' + d.source._id + '-' +
d.target._id))
+ .attr('startOffset', '59%')
Review comment:
why `59%` ? seems curious and arbitrary. at minimum deserves an
explanation. i noticed some of the long labels seemed to go close to the end
of the arc. if there is a way to actually center it that would be nicer -- but
if that's hard (which i assume it is) than a heuristic magic number such as
this makes sense.
agree it looks nicest if it's approximately centered in the usual short-text
case. starting the text near the source of the arc would make more logical
sense if it has to be left-aligned but definitely wouldn't be as aesthetically
pleasing. (so what you've done might be the best reasonable solution.)
--
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.
For queries about this service, please contact Infrastructure at:
[email protected]
