From 1f55fed31e3d7e604a1849ef298c218bcfe24ae3 Mon Sep 17 00:00:00 2001 From: Martha King Date: Mon, 3 Mar 2025 18:06:38 +0000 Subject: [PATCH 1/5] remove semi colons --- .../components/visualizations/TableVisualization.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization.vue b/app/gui/src/project-view/components/visualizations/TableVisualization.vue index ecbd3ec15636..7ff2bd732125 100644 --- a/app/gui/src/project-view/components/visualizations/TableVisualization.vue +++ b/app/gui/src/project-view/components/visualizations/TableVisualization.vue @@ -195,9 +195,9 @@ function formatNumber(params: ICellRendererParams) { function formatText(params: ICellRendererParams) { const htmlEscaped = params.value - .replaceAll('&', '&') - .replaceAll('<', '<') - .replaceAll('>', '>') + .replaceAll('&', '&') + .replaceAll('<', '<') + .replaceAll('>', '>') if (textFormatterSelected.value === 'off') { const replaceLinks = replaceLinksWithTag(htmlEscaped) From 868be335e53b51eaaf52e9f660f7abbaeae37f2e Mon Sep 17 00:00:00 2001 From: Martha King Date: Tue, 4 Mar 2025 11:05:32 +0000 Subject: [PATCH 2/5] move function add tests and prevent & geting replaced multiple times --- .../visualizations/TableVisualization.vue | 59 +------------------ .../TableVisualization/tableVizUtils.ts | 58 ++++++++++++++++++ .../__tests__/tableVizUtilsTests.spec.ts | 10 +++- 3 files changed, 69 insertions(+), 58 deletions(-) diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization.vue b/app/gui/src/project-view/components/visualizations/TableVisualization.vue index 7ff2bd732125..0b7732d4c459 100644 --- 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('&', '&') - .replaceAll('<', '<') - .replaceAll('>', '>') - - if (textFormatterSelected.value === 'off') { - const replaceLinks = replaceLinksWithTag(htmlEscaped) - return replaceLinks.replace(/^\s+|\s+$/g, ' ') - } - - const partialMappings = { - '\r': '␍
', - '\n': '␊
', - '\t': '→ |', - } - const fullMappings = { - '\r': '␍
', - '\n': '␊
', - '\t': '→ |', - } - - const replaceSpaces = - textFormatterSelected.value === 'full' ? - htmlEscaped.replaceAll(' ', '·') - : htmlEscaped.replace(/ \s+|^ +| +$/g, function (match: string) { - return `${match.replaceAll(' ', '·')}` - }) - - const replaceLinks = replaceLinksWithTag(replaceSpaces) - - const replaceReturns = replaceLinks.replace( - /\r\n/g, - '␍␊
', - ) - - const renderOtherWhitespace = (match: string) => { - return textFormatterSelected.value === 'full' && match != ' ' ? - '☐' - : 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 ` ${newString} ` -} - 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) => `${url}`, - ) -} - function escapeHTML(str: string) { const mapping: Record = { '&': '&', @@ -286,7 +231,7 @@ function cellRenderer(params: ICellRendererParams) { else if (params.value === undefined) return '' else if (params.value === '') return 'Empty' 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 index f3ab1cb5fa3e..1689512648d1 100644 --- 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) => `${url}`, + ) +} + +export const formatText = (input: string, textFormatterSelected: TextFormatOptions) => { + const htmlEscaped = input + .replaceAll('<', '<') + .replaceAll('>', '>') + + if (textFormatterSelected === 'off') { + const replaceLinks = replaceLinksWithTag(htmlEscaped) + return replaceLinks.replace(/^\s+|\s+$/g, ' ') + } + + const partialMappings = { + '\r': '␍
', + '\n': '␊
', + '\t': '→ |', + } + const fullMappings = { + '\r': '␍
', + '\n': '␊
', + '\t': '→ |', + } + + const replaceSpaces = + textFormatterSelected === 'full' ? + htmlEscaped.replaceAll(' ', '·') + : htmlEscaped.replace(/ \s+|^ +| +$/g, function (match: string) { + return `${match.replaceAll(' ', '·')}` + }) + + const replaceLinks = replaceLinksWithTag(replaceSpaces) + + const replaceReturns = replaceLinks.replace( + /\r\n/g, + '␍␊
', + ) + + const renderOtherWhitespace = (match: string) => { + return textFormatterSelected === 'full' && match != ' ' ? + '☐' + : 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 ` ${newString} ` +} 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 index 1c5ee33f76da..41833811aaba 100644 --- 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(' https://www.google.com/search?q=rock&roll ') +}) + +test('formatText (text, full formatting)', () => { + expect(formatText('rock & roll', 'full')).toEqual(' rock·&·roll ') +}) From 5bd79cf49dc851869ffdf9a94c4d5873df40a7e9 Mon Sep 17 00:00:00 2001 From: Martha King Date: Tue, 4 Mar 2025 17:08:51 +0000 Subject: [PATCH 3/5] fix merge --- .../components/visualizations/TableVisualization.vue | 3 ++- .../visualizations/TableVisualization/tableVizUtils.ts | 10 ++++------ .../__tests__/tableVizUtilsTests.spec.ts | 8 ++++++-- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization.vue b/app/gui/src/project-view/components/visualizations/TableVisualization.vue index 0b7732d4c459..ae368c888b50 100644 --- a/app/gui/src/project-view/components/visualizations/TableVisualization.vue +++ b/app/gui/src/project-view/components/visualizations/TableVisualization.vue @@ -231,7 +231,8 @@ function cellRenderer(params: ICellRendererParams) { else if (params.value === undefined) return '' else if (params.value === '') return 'Empty' else if (typeof params.value === 'number') return formatNumber(params) - else if (typeof params.value === 'string') return formatText(params.value, textFormatterSelected.value) + 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 index 1689512648d1..f12ebc27564e 100644 --- a/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts +++ b/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts @@ -1,6 +1,6 @@ -import { ICellRendererParams } from "ag-grid-enterprise" -import { TextFormatOptions } from "../TableVisualization.vue" -import { LINKABLE_URL_REGEX } from "@/util/link" +import { LINKABLE_URL_REGEX } from '@/util/link' +import { ICellRendererParams } from 'ag-grid-enterprise' +import { TextFormatOptions } from '../TableVisualization.vue' export const getCellValueType = (item: string) => { switch (true) { @@ -48,9 +48,7 @@ const replaceLinksWithTag = (str: string) => { } export const formatText = (input: string, textFormatterSelected: TextFormatOptions) => { - const htmlEscaped = input - .replaceAll('<', '<') - .replaceAll('>', '>') + const htmlEscaped = input.replaceAll('<', '<').replaceAll('>', '>') if (textFormatterSelected === 'off') { const replaceLinks = replaceLinksWithTag(htmlEscaped) 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 index 41833811aaba..479af6aa83c6 100644 --- a/app/gui/src/project-view/components/visualizations/__tests__/tableVizUtilsTests.spec.ts +++ b/app/gui/src/project-view/components/visualizations/__tests__/tableVizUtilsTests.spec.ts @@ -42,9 +42,13 @@ test('isNumericType (Char Type)', () => { }) test('formatText (text with link, full formatting)', () => { - expect(formatText('https://www.google.com/search?q=rock&roll', 'full')).toEqual(' https://www.google.com/search?q=rock&roll ') + expect(formatText('https://www.google.com/search?q=rock&roll', 'full')).toEqual( + ' https://www.google.com/search?q=rock&roll ', + ) }) test('formatText (text, full formatting)', () => { - expect(formatText('rock & roll', 'full')).toEqual(' rock·&·roll ') + expect(formatText('rock & roll', 'full')).toEqual( + ' rock·&·roll ', + ) }) From 0f95eae9e1679617f276bf05fd331922be7a097e Mon Sep 17 00:00:00 2001 From: Martha King Date: Wed, 5 Mar 2025 08:25:25 +0000 Subject: [PATCH 4/5] remove unused imports --- .../components/visualizations/TableVisualization.vue | 1 - .../visualizations/TableVisualization/tableVizUtils.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization.vue b/app/gui/src/project-view/components/visualizations/TableVisualization.vue index ae368c888b50..c2573f35d8a3 100644 --- a/app/gui/src/project-view/components/visualizations/TableVisualization.vue +++ b/app/gui/src/project-view/components/visualizations/TableVisualization.vue @@ -8,7 +8,6 @@ import { } from '@/components/visualizations/TableVisualization/tableVizToolbar' import { Ast } from '@/util/ast' import { Pattern } from '@/util/ast/match' -import { LINKABLE_URL_REGEX } from '@/util/link' import { useVisualizationConfig } from '@/util/visualizationBuiltins' import type { CellClassParams, diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts b/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts index f12ebc27564e..501aa0a87406 100644 --- a/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts +++ b/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts @@ -1,5 +1,4 @@ import { LINKABLE_URL_REGEX } from '@/util/link' -import { ICellRendererParams } from 'ag-grid-enterprise' import { TextFormatOptions } from '../TableVisualization.vue' export const getCellValueType = (item: string) => { From af17d82479a9a4a6ec2eb1a0dcf66db170412c42 Mon Sep 17 00:00:00 2001 From: Martha King Date: Wed, 5 Mar 2025 08:51:19 +0000 Subject: [PATCH 5/5] fix check --- .../visualizations/TableVisualization/tableVizUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts b/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts index 501aa0a87406..b3a5107df9fe 100644 --- a/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts +++ b/app/gui/src/project-view/components/visualizations/TableVisualization/tableVizUtils.ts @@ -85,7 +85,7 @@ export const formatText = (input: string, textFormatterSelected: TextFormatOptio : match } const newString = replaceReturns.replace(/[\s]/g, function (match: string) { - const mapping = textFormatterSelected.value === 'full' ? fullMappings : partialMappings + const mapping = textFormatterSelected === 'full' ? fullMappings : partialMappings return mapping[match as keyof typeof mapping] || renderOtherWhitespace(match) }) return ` ${newString} `