[GitHub] [brooklyn-ui] ahgittin commented on a change in pull request #232: Draw relationship path labels with textPath, if supplied

[GitBox <gi...@apache.org>]

ahgittin commented on a change in pull request #232:
URL: https://github.com/apache/brooklyn-ui/pull/232#discussion_r656934609



##########
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%')
+                .html((d) => (' ' + d.label + ' '));

Review comment:
       does this get html-escaped?  try with a label eg `<b>not bold</b>`.  we have `import _ from lodash` available so can use that if we need to escape it.
   
   also do we want a check `(d.label ? ' ' + d.label + ' ' : '')` here?  (i know it's hidden but still feels like good practice.)




-- 
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:
users@infra.apache.org