Do not truncate text when vertex is selected

Author: tillprochaska

src/components/NetworkDiagram/renderer/VertexLabelRenderer.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { VertexLabelRenderer } from './VertexLabelRenderer';
+import { Point } from '../layout/Point';
+
+describe('<VertexLabelRenderer />', () => {
+  it('renders text labels', () => {
+    const component = shallow(
+      <VertexLabelRenderer
+        type="text"
+        label="Lorem ipsum dolor sit amet."
+        center={new Point(0, 0)}
+      />
+    );
+
+    const label = component.find('text').first().text();
+    expect(label).toEqual('Lorem ipsum dolor sit amet.');
+  });
+
+  it('truncates long labels', () => {
+    const component = shallow(
+      <VertexLabelRenderer
+        type="text"
+        label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."
+        center={new Point(0, 0)}
+      />
+    );
+
+    const label = component.find('text').first().text();
+    expect(label).toEqual('Lorem ipsum dolor sit amet, co…');
+  });
+
+  it('display untruncated label when selected', () => {
+    const component = mount(
+      <svg>
+        <VertexLabelRenderer
+          type="text"
+          label="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."
+          center={new Point(0, 0)}
+          selected={true}
+        />
+      </svg>
+    );
+
+    const lines = component.find('tspan').map(tspan => tspan.text());
+    const verticalLineDelta = component.find('tspan').map(tspan => tspan.prop('dy'));
+
+    expect(lines).toEqual([
+      'Lorem ipsum dolor sit amet,',
+      'consectetuer adipiscing elit.',
+      'Aenean commodo ligula eget',
+      'dolor. Aenean massa.',
+    ]);
+
+    expect(verticalLineDelta).toEqual([0, 5.5, 5.5, 5.5]);
+  });
+});

src/components/NetworkDiagram/renderer/VertexLabelRenderer.tsx

@@ -1,22 +1,25 @@
 import * as React from 'react'
 import truncateText from 'truncate';
+import { wrapLines } from '../utils';
 
 import { Date, Numeric, URL } from 'types';
 import { Point } from 'NetworkDiagram/layout/Point'
 
 const labelTruncate = 30;
+const fontSize = 5;
 
 interface IVertexLabelRendererProps {
+  type: string,
   label: string,
   center: Point,
   onClick?: (e: any) => void,
   color?: string
-  type: string
+  selected?: boolean,
 }
 
 export class VertexLabelRenderer extends React.PureComponent<IVertexLabelRendererProps> {
   formatLabel() {
-    const { label, type } = this.props;
+    const { label, type, selected } = this.props;
 
     if (type === 'url') {
       return <URL value={label} onClick={(e: React.MouseEvent) => e.stopPropagation()} truncate={labelTruncate} />;
@@ -28,13 +31,25 @@ export class VertexLabelRenderer extends React.PureComponent<IVertexLabelRendere
       return <Numeric num={Number(label)} />;
     }
 
+    if (selected) {
+      return (
+        <>
+          {wrapLines(label, labelTruncate).map((line, index) => (
+            <tspan key={index} x="0" dy={index === 0 ? 0 : fontSize * 1.1}>
+              {line}
+            </tspan>)
+          )}
+        </>
+      );
+    }
+
     return truncateText(label, labelTruncate);
   }
 
   render() {
     const { center, onClick, color } = this.props;
     const style = {
-      fontSize: "5px",
+      fontSize: `${fontSize}px`,
       fontFamily: "sans-serif",
       fontWeight: "bold",
       userSelect: "none"

src/components/NetworkDiagram/renderer/VertexRenderer.tsx

@@ -190,8 +190,18 @@ export class VertexRenderer extends React.PureComponent<IVertexRendererProps, IV
             stroke={isEntity ? 'none' : vertexColor}
             onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}
           />
-          <VertexLabelRenderer center={labelPosition} label={vertex.label} type={vertex.type} onClick={this.onClick} color={vertexColor} />
-          <IconRenderer entity={entityManager.getEntity(vertex.entityId)} radius={vertexRadius} />
+          <VertexLabelRenderer
+            center={labelPosition}
+            label={vertex.label}
+            type={vertex.type}
+            selected={selected}
+            onClick={this.onClick}
+            color={vertexColor}
+          />
+          <IconRenderer
+            entity={entityManager.getEntity(vertex.entityId)}
+            radius={vertexRadius}
+          />
         </g>
       </DraggableCore>
     );