move function add tests and prevent & geting replaced multiple times

enso-org · Mar 4, 2025 · 868be33 · 868be33
1 parent 1f55fed
commit 868be33
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 58 deletions.
diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization.vue b/app/gui/src/project-view/components/visualizations/TableVisualization.vue
@@ -20,7 +20,7 @@ import type {
 } from 'ag-grid-enterprise'
 import { computed, onMounted, ref, shallowRef, watchEffect, type Ref } from 'vue'
 import { TableVisualisationTooltip } from './TableVisualization/TableVisualisationTooltip'
-import { getCellValueType, isNumericType } from './TableVisualization/tableVizUtils'
+import { formatText, getCellValueType, isNumericType } from './TableVisualization/tableVizUtils'
 
 export const name = 'Table'
 export const icon = 'table'
@@ -193,54 +193,6 @@ function formatNumber(params: ICellRendererParams) {
   return needsGrouping ? numberFormatGroupped.format(value) : numberFormat.format(value)
 }
 
-function formatText(params: ICellRendererParams) {
-  const htmlEscaped = params.value
-    .replaceAll('&', '&amp')
-    .replaceAll('<', '&lt')
-    .replaceAll('>', '&gt')
-
-  if (textFormatterSelected.value === 'off') {
-    const replaceLinks = replaceLinksWithTag(htmlEscaped)
-    return replaceLinks.replace(/^\s+|\s+$/g, '&nbsp;')
-  }
-
-  const partialMappings = {
-    '\r': '<span style="color: #df8800">␍</span> <br>',
-    '\n': '<span style="color: #df8800;">␊</span> <br>',
-    '\t': '<span style="color: #df8800; white-space: break-spaces;">&#8594;  |</span>',
-  }
-  const fullMappings = {
-    '\r': '<span style="color: #df8800">␍</span> <br>',
-    '\n': '<span style="color: #df8800">␊</span> <br>',
-    '\t': '<span style="color: #df8800; white-space: break-spaces;">&#8594;  |</span>',
-  }
-
-  const replaceSpaces =
-    textFormatterSelected.value === 'full' ?
-      htmlEscaped.replaceAll(' ', '<span style="color: #df8800">&#183;</span>')
-    : htmlEscaped.replace(/ \s+|^ +| +$/g, function (match: string) {
-        return `<span style="color: #df8800">${match.replaceAll(' ', '&#183;')}</span>`
-      })
-
-  const replaceLinks = replaceLinksWithTag(replaceSpaces)
-
-  const replaceReturns = replaceLinks.replace(
-    /\r\n/g,
-    '<span style="color: #df8800">␍␊</span> <br>',
-  )
-
-  const renderOtherWhitespace = (match: string) => {
-    return textFormatterSelected.value === 'full' && match != ' ' ?
-        '<span style="color: #df8800">&#9744;</span>'
-      : match
-  }
-  const newString = replaceReturns.replace(/[\s]/g, function (match: string) {
-    const mapping = textFormatterSelected.value === 'full' ? fullMappings : partialMappings
-    return mapping[match as keyof typeof mapping] || renderOtherWhitespace(match)
-  })
-  return `<span > ${newString} <span>`
-}
-
 function setRowLimit(newRowLimit: number) {
   if (newRowLimit !== rowLimit.value) {
     rowLimit.value = newRowLimit
@@ -252,13 +204,6 @@ function setRowLimit(newRowLimit: number) {
   }
 }
 
-function replaceLinksWithTag(str: string) {
-  return str.replace(
-    LINKABLE_URL_REGEX,
-    (url: string) => `<a href="${url}" target="_blank" class="link">${url}</a>`,
-  )
-}
-
 function escapeHTML(str: string) {
   const mapping: Record<string, string> = {
     '&': '&amp;',
@@ -286,7 +231,7 @@ function cellRenderer(params: ICellRendererParams) {
   else if (params.value === undefined) return ''
   else if (params.value === '') return '<span style="color:grey; font-style: italic;">Empty</span>'
   else if (typeof params.value === 'number') return formatNumber(params)
-  else if (typeof params.value === 'string') return formatText(params)
+  else if (typeof params.value === 'string') return formatText(params.value, textFormatterSelected.value)
   else if (Array.isArray(params.value)) return `[Vector ${params.value.length} items]`
   else if (typeof params.value === 'object') {
     const valueType = params.value?.type

diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts b/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts
@@ -1,3 +1,7 @@
+import { ICellRendererParams } from "ag-grid-enterprise"
+import { TextFormatOptions } from "../TableVisualization.vue"
+import { LINKABLE_URL_REGEX } from "@/util/link"
+
 export const getCellValueType = (item: string) => {
   switch (true) {
     case isInteger(item):
@@ -35,3 +39,57 @@ export const isNumericType = (valueType: string) => {
   const isNumber = ['Integer', 'Float', 'Decimal', 'Byte']
   return isNumber.indexOf(valueType) != -1
 }
+
+const replaceLinksWithTag = (str: string) => {
+  return str.replace(
+    LINKABLE_URL_REGEX,
+    (url: string) => `<a href="${url}" target="_blank" class="link">${url}</a>`,
+  )
+}
+
+export const formatText = (input: string, textFormatterSelected: TextFormatOptions) => {
+  const htmlEscaped = input
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+
+  if (textFormatterSelected === 'off') {
+    const replaceLinks = replaceLinksWithTag(htmlEscaped)
+    return replaceLinks.replace(/^\s+|\s+$/g, '&nbsp;')
+  }
+
+  const partialMappings = {
+    '\r': '<span style="color: #df8800">␍</span> <br>',
+    '\n': '<span style="color: #df8800;">␊</span> <br>',
+    '\t': '<span style="color: #df8800; white-space: break-spaces;">&#8594;  |</span>',
+  }
+  const fullMappings = {
+    '\r': '<span style="color: #df8800">␍</span> <br>',
+    '\n': '<span style="color: #df8800">␊</span> <br>',
+    '\t': '<span style="color: #df8800; white-space: break-spaces;">&#8594;  |</span>',
+  }
+
+  const replaceSpaces =
+    textFormatterSelected === 'full' ?
+      htmlEscaped.replaceAll(' ', '<span style="color: #df8800">&#183;</span>')
+    : htmlEscaped.replace(/ \s+|^ +| +$/g, function (match: string) {
+        return `<span style="color: #df8800">${match.replaceAll(' ', '&#183;')}</span>`
+      })
+
+  const replaceLinks = replaceLinksWithTag(replaceSpaces)
+
+  const replaceReturns = replaceLinks.replace(
+    /\r\n/g,
+    '<span style="color: #df8800">␍␊</span> <br>',
+  )
+
+  const renderOtherWhitespace = (match: string) => {
+    return textFormatterSelected === 'full' && match != ' ' ?
+        '<span style="color: #df8800">&#9744;</span>'
+      : match
+  }
+  const newString = replaceReturns.replace(/[\s]/g, function (match: string) {
+    const mapping = textFormatterSelected.value === 'full' ? fullMappings : partialMappings
+    return mapping[match as keyof typeof mapping] || renderOtherWhitespace(match)
+  })
+  return `<span > ${newString} <span>`
+}
diff --git a/app/gui/src/project-view/components/visualizations/__tests__/tableVizUtilsTests.spec.ts b/app/gui/src/project-view/components/visualizations/__tests__/tableVizUtilsTests.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from 'vitest'
-import { getCellValueType, isNumericType } from '../TableVisualization/tableVizUtils'
+import { formatText, getCellValueType, isNumericType } from '../TableVisualization/tableVizUtils'
 
 test('getCellValueType (Text)', () => {
   expect(getCellValueType('Alan')).toEqual('Char')
@@ -40,3 +40,11 @@ test('isNumericType (Numeric Type)', () => {
 test('isNumericType (Char Type)', () => {
   expect(isNumericType('Char')).toEqual(false)
 })
+
+test('formatText (text with link, full formatting)', () => {
+  expect(formatText('https://www.google.com/search?q=rock&roll', 'full')).toEqual('<span > <a href="https://www.google.com/search?q=rock&roll" target="_blank" class="link">https://www.google.com/search?q=rock&roll</a> <span>')
+})
+
+test('formatText (text, full formatting)', () => {
+  expect(formatText('rock & roll', 'full')).toEqual('<span > rock<span style="color: #df8800">&#183;</span>&<span style="color: #df8800">&#183;</span>roll <span>')
+})