Merge pull request #3 from satya210/long-node-text-fix

Long node text fix

src/collapsible_tree/collapsible_tree.ts

@@ -2,6 +2,7 @@
 declare var looker: Looker;
 
 import * as d3 from 'd3';
+import {getEllipsizedText} from '../text';
 import {handleErrors} from '../utils';
 
 import {
@@ -219,8 +220,14 @@ const vis: CollapsibleTreeVisualization = {
         .style('cursor', 'pointer')
         .style('font-family', "'Open Sans', Helvetica, sans-serif")
         .style('font-size', textSize + 'px')
-        .text((d: any) => {
-          return d.data.name;
+        .html((d: any) => {
+          const ellipsizedText = getEllipsizedText(
+            d.data.name,
+            d.y,
+            d.parent?.y,
+            textSize
+          );
+          return `<title>${d.data.name}</title>${ellipsizedText}`;
         })
         .on('click', (d: any) => {
           LookerCharts.Utils.openDrillMenu({

src/text.test.ts

@@ -0,0 +1,29 @@
+import {expect, describe, test} from '@jest/globals';
+import {getEllipsizedText} from './text';
+
+describe('getEllipsizedText', () => {
+  test('should ellipsize long text', () => {
+    expect(
+      getEllipsizedText(
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, laudantium!',
+        200,
+        100,
+        16
+      )
+    ).toMatch(/\.{3}$/);
+    expect(
+      getEllipsizedText(
+        'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, laudantium!',
+        100,
+        200,
+        16
+      )
+    ).toMatch(/\.{3}$/);
+  });
+
+  test('should not ellipsize short text', () => {
+    expect(getEllipsizedText('Lorem ipsum dolor sit amet', 500, 100, 16)).toBe(
+      'Lorem ipsum dolor sit amet'
+    );
+  });
+});

src/text.ts

@@ -0,0 +1,35 @@
+/**
+ * Returns an ellipsized text that fits in between a calculated distance
+ * (not overlapping on other nodes)
+ *
+ * @param text Text to be ellipsized
+ * @param nodePos Current node position in the 2D co-ordinate
+ * @param parentNodePos Parent node position in the 2D co-ordinate
+ * @param fontSize Text Size used in the UI element
+ * @returns Calculated ellipsized text
+ */
+export const getEllipsizedText = (
+  text: string,
+  nodePos: number,
+  parentNodePos: number,
+  fontSize: number
+) => {
+  // Observed width ratio of `W` and `f` (i.e 3 / 2)
+  const charHWRatio = 3 / 2;
+  const minCharSize = 6;
+
+  const distance = Math.abs(nodePos - (parentNodePos || 0));
+  const charSize = fontSize / charHWRatio || minCharSize;
+
+  let maxCharWidth = Math.floor(distance / charSize);
+  if (maxCharWidth === 0) {
+    return text;
+  }
+
+  // Compensating for 3 dots and 1 space in ellipsized text
+  maxCharWidth -= 4;
+
+  return (
+    text.substring(0, maxCharWidth) + (text.length > maxCharWidth ? ' ...' : '')
+  );
+};