Split handling of highlighted code lines into helper function

Author: shati-patel

extensions/ql-vscode/src/pure/sarif-utils.ts

@@ -1,4 +1,5 @@
 import * as Sarif from 'sarif';
+import { HighlightedRegion } from '../remote-queries/shared/analysis-result';
 import { ResolvableLocationValue } from './bqrs-cli-types';
 
 export interface SarifLink {
@@ -173,3 +174,65 @@ export function parseSarifRegion(
 export function isNoLocation(loc: ParsedSarifLocation): loc is NoLocation {
   return 'hint' in loc;
 }
+
+// Some helpers for highlighting specific regions from a SARIF code snippet
+
+/**
+ * Checks whether a particular line (determined by its line number in the original file)
+ * is part of the highlighted region of a SARIF code snippet.
+ */
+export function shouldHighlightLine(
+  lineNumber: number,
+  highlightedRegion: HighlightedRegion
+): boolean {
+  if (lineNumber < highlightedRegion.startLine) {
+    return false;
+  }
+
+  if (highlightedRegion.endLine == undefined) {
+    return lineNumber == highlightedRegion.startLine;
+  }
+
+  return lineNumber <= highlightedRegion.endLine;
+}
+
+/**
+ * A line of code split into: plain text before the highlighted section, the highlighted
+ * text itself, and plain text after the highlighted section.
+ */
+interface partiallyHighlightedLine {
+  plainSection1: string;
+  highlightedSection: string;
+  plainSection2: string;
+}
+
+/**
+ * Splits a line of code into the highlighted and non-highlighted sections.
+ */
+export function parseHighlightedLine(
+  line: string,
+  lineNumber: number,
+  highlightedRegion: HighlightedRegion
+): partiallyHighlightedLine {
+  const isSingleLineHighlight = highlightedRegion.endLine === undefined;
+  const isFirstHighlightedLine = lineNumber === highlightedRegion.startLine;
+  const isLastHighlightedLine = lineNumber === highlightedRegion.endLine;
+
+  const highlightStartColumn = isSingleLineHighlight
+    ? highlightedRegion.startColumn
+    : isFirstHighlightedLine
+      ? highlightedRegion.startColumn
+      : 0;
+
+  const highlightEndColumn = isSingleLineHighlight
+    ? highlightedRegion.endColumn
+    : isLastHighlightedLine
+      ? highlightedRegion.endColumn
+      : line.length + 1;
+
+  const plainSection1 = line.substring(0, highlightStartColumn - 1);
+  const highlightedSection = line.substring(highlightStartColumn - 1, highlightEndColumn - 1);
+  const plainSection2 = line.substring(highlightEndColumn - 1, line.length);
+
+  return { plainSection1, highlightedSection, plainSection2 };
+}

extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx

@@ -4,6 +4,7 @@ import { CodeSnippet, FileLink, HighlightedRegion, AnalysisMessage, ResultSeveri
 import { Box, Link } from '@primer/react';
 import VerticalSpace from './VerticalSpace';
 import { createRemoteFileRef } from '../../pure/location-link-utils';
+import { parseHighlightedLine, shouldHighlightLine } from '../../pure/sarif-utils';
 
 const borderColor = 'var(--vscode-editor-snippetFinalTabstopHighlightBorder)';
 const warningColor = '#966C23';
@@ -22,18 +23,6 @@ const getSeverityColor = (severity: ResultSeverity) => {
 
 const replaceSpaceChar = (text: string) => text.replaceAll(' ', '\u00a0');
 
-const shouldHighlightLine = (lineNumber: number, highlightedRegion: HighlightedRegion) => {
-  if (lineNumber < highlightedRegion.startLine) {
-    return false;
-  }
-
-  if (highlightedRegion.endLine == undefined) {
-    return lineNumber == highlightedRegion.startLine;
-  }
-
-  return lineNumber <= highlightedRegion.endLine;
-};
-
 const Container = styled.div`
   font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   font-size: x-small;
@@ -142,31 +131,13 @@ const CodeLine = ({
     return <PlainLine text={line} />;
   }
 
-  const isSingleLineHighlight = highlightedRegion.endLine === undefined;
-  const isFirstHighlightedLine = lineNumber === highlightedRegion.startLine;
-  const isLastHighlightedLine = lineNumber === highlightedRegion.endLine;
-
-  const highlightStartColumn = isSingleLineHighlight
-    ? highlightedRegion.startColumn
-    : isFirstHighlightedLine
-      ? highlightedRegion.startColumn
-      : 0;
-
-  const highlightEndColumn = isSingleLineHighlight
-    ? highlightedRegion.endColumn
-    : isLastHighlightedLine
-      ? highlightedRegion.endColumn
-      : line.length + 1;
-
-  const section1 = line.substring(0, highlightStartColumn - 1);
-  const section2 = line.substring(highlightStartColumn - 1, highlightEndColumn - 1);
-  const section3 = line.substring(highlightEndColumn - 1, line.length);
+  const partiallyHighlightedLine = parseHighlightedLine(line, lineNumber, highlightedRegion);
 
   return (
     <>
-      <PlainLine text={section1} />
-      <HighlightedLine text={section2} />
-      <PlainLine text={section3} />
+      <PlainLine text={partiallyHighlightedLine.plainSection1} />
+      <HighlightedLine text={partiallyHighlightedLine.highlightedSection} />
+      <PlainLine text={partiallyHighlightedLine.plainSection2} />
     </>
   );
 };