fix(LogViewer): Adjust parsed data to remove tab character

When we estimate the height in guessRowHeight, the data we are using has a \t character rather than tabs. This leads to a misleading character count, which impacts the calculated number of rows displayed. Some example data was provided by OpenShift that had overlapping rows. This data had tabs in it. When tabs were removed or replaced with strings, the issue could not be recreated. There may be other issues involved here, but this at least fixes this one provided example. We should talk to products that are continuing to experience this and gather sample outputs to see if we can recreate/adjust on an individual basis.

Author: rebeccaalpert

packages/module/src/LogViewer/LogViewer.tsx

@@ -64,6 +64,8 @@ export interface LogViewerProps {
    * measured to prevent a bug where one line can overlap another.
    */
   fastRowHeightEstimationLimit?: number;
+  /** Number of spaces used to replace tabs */
+  numSpaces?: number;
 }
 
 let canvas: HTMLCanvasElement | undefined;
@@ -98,6 +100,7 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
     initialIndexWidth,
     useAnsiClasses,
     fastRowHeightEstimationLimit = 5000,
+    numSpaces = 8,
     ...props
   }: LogViewerProps) => {
     const [searchedInput, setSearchedInput] = useState<string | null>('');
@@ -112,7 +115,13 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
     const [listKey, setListKey] = useState(1);
 
     /* Parse data every time it changes */
-    const parsedData = useMemo(() => parseConsoleOutput(data), [data]);
+    const parsedData = useMemo(
+      () =>
+        // use of tabs in data can throw off the character count when we estimate height since we see it as \t, so replace them with spaces
+        // spaces seem to get picked up by height calculations
+        parseConsoleOutput(data).map((datum) => datum.replace(/\t/g, ' '.repeat(numSpaces))),
+      [data]
+    );
 
     const isChrome = useMemo(() => navigator.userAgent.indexOf('Chrome') !== -1, []);
 
@@ -183,6 +192,10 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
     }, [parsedData, scrollToRow]);
 
     const createDummyElements = () => {
+      if (!containerRef.current) {
+        return;
+      }
+
       // create dummy elements
       const dummyIndex = document.createElement('span');
       dummyIndex.className = css(styles.logViewerIndex);