feat(string): add utility fn to trim string

getsentry · Jan 13, 2022 · c193cd4 · c193cd4
1 parent 848a30a
commit c193cd4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 19 deletions.
diff --git a/static/app/utils/profiling/gl/utils.ts b/static/app/utils/profiling/gl/utils.ts
@@ -411,3 +411,20 @@ export function findRangeBinarySearch(
     }
   }
 }
+
+export const ELLIPSIS = '\u2026';
+export function trimTextCenter(text: string, low: number) {
+  if (low > text.length) {
+    return text;
+  }
+
+  const prefixLength = Math.floor(low / 2);
+  // Use 1 character less than the low value to account for ellipsis
+  // and favor displaying the prefix
+  const postfixLength = low - prefixLength - 1;
+
+  return `${text.substring(0, prefixLength)}${ELLIPSIS}${text.substring(
+    text.length - postfixLength,
+    text.length
+  )}`;
+}
diff --git a/static/app/utils/profiling/renderers/textRenderer.tsx b/static/app/utils/profiling/renderers/textRenderer.tsx
@@ -2,9 +2,13 @@ import {mat3} from 'gl-matrix';
 
 import {Flamegraph} from '../Flamegraph';
 import {FlamegraphTheme} from '../flamegraph/FlamegraphTheme';
-import {getContext, Rect, resizeCanvasToDisplaySize} from '../gl/utils';
-
-const ELLIPSIS = '\u2026';
+import {
+  findRangeBinarySearch,
+  getContext,
+  Rect,
+  resizeCanvasToDisplaySize,
+  trimTextCenter,
+} from '../gl/utils';
 
 class TextRenderer {
   textCache: Record<string, number> = {};
@@ -97,23 +101,19 @@ class TextRenderer {
 
       if (paddedWidth >= minWidth) {
         if (this.measureText(this.context, text) > paddedWidth) {
-          const [low] = findValueBisect(
-            0,
-            text.length,
-            n => this.measureText(this.context, text.substring(0, n)),
-            paddedWidth
-          );
-
-          const prefixLength = Math.floor(low / 2);
-          const postfixLength = low - prefixLength - 1;
-
-          const string = `${text.substr(0, prefixLength)}${ELLIPSIS}${text.substr(
-            text.length - postfixLength,
-            postfixLength
-          )}`;
-
           this.context.fillStyle = this.theme.COLORS.LABEL_FONT_COLOR;
-          this.context.fillText(string, x, y);
+          this.context.fillText(
+            trimTextCenter(
+              text,
+              findRangeBinarySearch(
+                {low: 0, high: text.length},
+                n => this.measureText(this.context, text.substring(0, n)),
+                paddedWidth
+              )[0]
+            ),
+            x,
+            y
+          );
         } else {
           this.context.fillStyle = this.theme.COLORS.LABEL_FONT_COLOR;
           this.context.fillText(text, x, y);

diff --git a/tests/js/spec/utils/profiling/gl/utils.spec.tsx b/tests/js/spec/utils/profiling/gl/utils.spec.tsx
@@ -3,11 +3,13 @@ import {mat3, vec2} from 'gl-matrix';
 import {
   createProgram,
   createShader,
+  ELLIPSIS,
   findRangeBinarySearch,
   getContext,
   makeProjectionMatrix,
   Rect,
   Transform,
+  trimTextCenter,
 } from 'sentry/utils/profiling/gl/utils';
 
 describe('makeProjectionMatrix', () => {
@@ -354,3 +356,15 @@ describe('findRangeBinarySearch', () => {
     expect(text.substring(0, low)).toBe('abc');
   });
 });
+
+describe('trimTextCenter', () => {
+  it('trims nothing if low > length', () => {
+    expect(trimTextCenter('abc', 4)).toBe('abc');
+  });
+  it('trims center perfectly', () => {
+    expect(trimTextCenter('abcdef', 5)).toBe(`ab${ELLIPSIS}ef`);
+  });
+  it('favors prefix length', () => {
+    expect(trimTextCenter('abcdef', 4)).toBe(`ab${ELLIPSIS}f`);
+  });
+});