From a1b9839294310ef5dd291ee098092170bd4405e7 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Sat, 23 Mar 2024 21:53:40 +0000 Subject: [PATCH 1/5] towards truncation, wip --- .../loculus/templates/_common-metadata.tpl | 3 +++ kubernetes/loculus/values.yaml | 1 + website/src/components/SearchPage/Table.tsx | 22 ++++++++++++++----- website/src/types/config.ts | 1 + 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/kubernetes/loculus/templates/_common-metadata.tpl b/kubernetes/loculus/templates/_common-metadata.tpl index 8fb28c6d14..34b34c28ca 100644 --- a/kubernetes/loculus/templates/_common-metadata.tpl +++ b/kubernetes/loculus/templates/_common-metadata.tpl @@ -82,6 +82,9 @@ fields: {{- if .displayName }} displayName: {{ .displayName }} {{- end }} + {{- if .truncateColumnDisplayTo }} + truncateColumnDisplayTo: {{ .truncateColumnDisplayTo }} + {{- end }} {{- if .customDisplay }} customDisplay: type: {{ .customDisplay.type }} diff --git a/kubernetes/loculus/values.yaml b/kubernetes/loculus/values.yaml index 7126d57ae5..1eda8cb649 100644 --- a/kubernetes/loculus/values.yaml +++ b/kubernetes/loculus/values.yaml @@ -226,6 +226,7 @@ defaultOrganisms: type: string generateIndex: true autocomplete: true + truncateColumnDisplayTo: 15 - name: authors displayName: Authors type: string diff --git a/website/src/components/SearchPage/Table.tsx b/website/src/components/SearchPage/Table.tsx index 8d76afe445..c9a3b50271 100644 --- a/website/src/components/SearchPage/Table.tsx +++ b/website/src/components/SearchPage/Table.tsx @@ -37,9 +37,12 @@ export const Table: FC = ({ }) => { const primaryKey = schema.primaryKey; + const maxLengths = schema.metadata.map((m) => m.truncateColumnTo ?? 100); + const columns = schema.tableColumns.map((field) => ({ field, - headerName: capitalCase(field), + headerName: schema.metadata.find((m) => m.name === field)?.displayName ?? capitalCase(field), + maxLength: maxLengths[schema.metadata.findIndex((m) => m.name === field)], })); const handleSort = (field: string) => { @@ -105,7 +108,7 @@ export const Table: FC = ({ handleSort(primaryKey)} - className='px-2 py-3 pl-6 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer' + className='px-2 py-3 pl-6 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer text-center' > {capitalCase(primaryKey)} {orderBy.field === primaryKey && orderIcon} @@ -113,7 +116,7 @@ export const Table: FC = ({ handleSort(c.field)} - className='px-2 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer last:pr-6' + className='px-2 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer last:pr-6 text-center' > {c.headerName} {orderBy.field === c.field && orderIcon} @@ -132,8 +135,17 @@ export const Table: FC = ({ {columns.map((c) => ( - - {row[c.field]} + c.maxLength + ? row[c.field] + : '' + }> + {typeof row[c.field] === 'string' && row[c.field].length > c.maxLength + ? `${row[c.field].slice(0, c.maxLength)}...` + : row[c.field] + } + ))} diff --git a/website/src/types/config.ts b/website/src/types/config.ts index 90cfbb91a5..15167403d7 100644 --- a/website/src/types/config.ts +++ b/website/src/types/config.ts @@ -15,6 +15,7 @@ export const metadata = z.object({ autocomplete: z.boolean().optional(), notSearchable: z.boolean().optional(), customDisplay: customDisplay.optional(), + truncateColumnTo: z.number().optional(), }); export type CustomDisplay = z.infer; From eccadd1e04c15c151878363feb9429db303e9ac4 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Sun, 24 Mar 2024 16:30:54 +0000 Subject: [PATCH 2/5] fixup --- kubernetes/loculus/templates/_common-metadata.tpl | 2 +- kubernetes/loculus/values.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/kubernetes/loculus/templates/_common-metadata.tpl b/kubernetes/loculus/templates/_common-metadata.tpl index 34b34c28ca..d11bf1a15c 100644 --- a/kubernetes/loculus/templates/_common-metadata.tpl +++ b/kubernetes/loculus/templates/_common-metadata.tpl @@ -83,7 +83,7 @@ fields: displayName: {{ .displayName }} {{- end }} {{- if .truncateColumnDisplayTo }} - truncateColumnDisplayTo: {{ .truncateColumnDisplayTo }} + truncateColumnTo: {{ .truncateColumnTo }} {{- end }} {{- if .customDisplay }} customDisplay: diff --git a/kubernetes/loculus/values.yaml b/kubernetes/loculus/values.yaml index 1eda8cb649..0ba63d9930 100644 --- a/kubernetes/loculus/values.yaml +++ b/kubernetes/loculus/values.yaml @@ -226,7 +226,7 @@ defaultOrganisms: type: string generateIndex: true autocomplete: true - truncateColumnDisplayTo: 15 + truncateColumnTo: 15 - name: authors displayName: Authors type: string From fb15521482659085748ec925bb781543d87f92fb Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Wed, 27 Mar 2024 11:36:57 +0000 Subject: [PATCH 3/5] properly working --- .../loculus/templates/_common-metadata.tpl | 2 +- kubernetes/loculus/values.yaml | 2 +- website/src/components/SearchPage/Table.tsx | 30 +++++++++++-------- website/src/types/config.ts | 2 +- 4 files changed, 20 insertions(+), 16 deletions(-) diff --git a/kubernetes/loculus/templates/_common-metadata.tpl b/kubernetes/loculus/templates/_common-metadata.tpl index d11bf1a15c..34b34c28ca 100644 --- a/kubernetes/loculus/templates/_common-metadata.tpl +++ b/kubernetes/loculus/templates/_common-metadata.tpl @@ -83,7 +83,7 @@ fields: displayName: {{ .displayName }} {{- end }} {{- if .truncateColumnDisplayTo }} - truncateColumnTo: {{ .truncateColumnTo }} + truncateColumnDisplayTo: {{ .truncateColumnDisplayTo }} {{- end }} {{- if .customDisplay }} customDisplay: diff --git a/kubernetes/loculus/values.yaml b/kubernetes/loculus/values.yaml index 0ba63d9930..1eda8cb649 100644 --- a/kubernetes/loculus/values.yaml +++ b/kubernetes/loculus/values.yaml @@ -226,7 +226,7 @@ defaultOrganisms: type: string generateIndex: true autocomplete: true - truncateColumnTo: 15 + truncateColumnDisplayTo: 15 - name: authors displayName: Authors type: string diff --git a/website/src/components/SearchPage/Table.tsx b/website/src/components/SearchPage/Table.tsx index c9a3b50271..becf2ef911 100644 --- a/website/src/components/SearchPage/Table.tsx +++ b/website/src/components/SearchPage/Table.tsx @@ -1,5 +1,6 @@ import { capitalCase } from 'change-case'; import type { FC, ReactElement } from 'react'; +import { Tooltip } from 'react-tooltip'; import { routes, navigateToSearchLikePage, type ClassOfSearchPageType } from '../../routes/routes.ts'; import type { AccessionFilter, MetadataFilter, MutationFilter, Schema } from '../../types/config.ts'; @@ -37,12 +38,12 @@ export const Table: FC = ({ }) => { const primaryKey = schema.primaryKey; - const maxLengths = schema.metadata.map((m) => m.truncateColumnTo ?? 100); + const maxLengths = Object.fromEntries(schema.metadata.map((m) => [m.name, m.truncateColumnDisplayTo ?? 100])); const columns = schema.tableColumns.map((field) => ({ field, headerName: schema.metadata.find((m) => m.name === field)?.displayName ?? capitalCase(field), - maxLength: maxLengths[schema.metadata.findIndex((m) => m.name === field)], + maxLength: maxLengths[field], })); const handleSort = (field: string) => { @@ -102,13 +103,14 @@ export const Table: FC = ({ return (
+ {data.length !== 0 ? ( @@ -116,7 +118,7 @@ export const Table: FC = ({ @@ -135,17 +137,19 @@ export const Table: FC = ({ {columns.map((c) => ( - ))} diff --git a/website/src/types/config.ts b/website/src/types/config.ts index 15167403d7..41d5443f01 100644 --- a/website/src/types/config.ts +++ b/website/src/types/config.ts @@ -15,7 +15,7 @@ export const metadata = z.object({ autocomplete: z.boolean().optional(), notSearchable: z.boolean().optional(), customDisplay: customDisplay.optional(), - truncateColumnTo: z.number().optional(), + truncateColumnDisplayTo: z.number().optional(), }); export type CustomDisplay = z.infer; From a48109626a792ba3a8b478a6f6d321381b3ea679 Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Wed, 27 Mar 2024 12:04:35 +0000 Subject: [PATCH 4/5] update --- website/src/components/SearchPage/Table.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/website/src/components/SearchPage/Table.tsx b/website/src/components/SearchPage/Table.tsx index becf2ef911..5abab480e7 100644 --- a/website/src/components/SearchPage/Table.tsx +++ b/website/src/components/SearchPage/Table.tsx @@ -141,14 +141,16 @@ export const Table: FC = ({ key={`${index}-${c.field}`} className='px-2 py-2 text-primary-900 last:pr-6' data-tooltip-content={ - typeof row[c.field] === 'string' && row[c.field].length > c.maxLength + typeof row[c.field] === 'string' && + row[c.field]!.toString().length > c.maxLength ? row[c.field] : '' } data-tooltip-id='table-tip' > - {typeof row[c.field] === 'string' && row[c.field].length > c.maxLength - ? `${row[c.field].slice(0, c.maxLength)}...` + {typeof row[c.field] === 'string' && + row[c.field]!.toString().length > c.maxLength + ? `${row[c.field]?.toString().slice(0, c.maxLength)}…` : row[c.field]} ))} From 0235ccaee33faf766e6cfef1232d8998427fc4cc Mon Sep 17 00:00:00 2001 From: Theo Sanderson Date: Wed, 27 Mar 2024 13:17:07 +0000 Subject: [PATCH 5/5] fix types --- website/src/components/SearchPage/Table.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/src/components/SearchPage/Table.tsx b/website/src/components/SearchPage/Table.tsx index 5abab480e7..c5c7dbef6c 100644 --- a/website/src/components/SearchPage/Table.tsx +++ b/website/src/components/SearchPage/Table.tsx @@ -7,6 +7,7 @@ import type { AccessionFilter, MetadataFilter, MutationFilter, Schema } from '.. import type { OrderBy } from '../../types/lapis.ts'; import MdiTriangle from '~icons/mdi/triangle'; import MdiTriangleDown from '~icons/mdi/triangle-down'; + export type TableSequenceData = { [key: string]: string | number | null; }; @@ -143,7 +144,7 @@ export const Table: FC = ({ data-tooltip-content={ typeof row[c.field] === 'string' && row[c.field]!.toString().length > c.maxLength - ? row[c.field] + ? row[c.field]!.toString() : '' } data-tooltip-id='table-tip'
handleSort(primaryKey)} - className='px-2 py-3 pl-6 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer text-center' + className='px-2 py-3 pl-6 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer text-left' > {capitalCase(primaryKey)} {orderBy.field === primaryKey && orderIcon} handleSort(c.field)} - className='px-2 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer last:pr-6 text-center' + className='px-2 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase cursor-pointer last:pr-6 text-left' > {c.headerName} {orderBy.field === c.field && orderIcon} c.maxLength - ? row[c.field] - : '' - }> + c.maxLength + ? row[c.field] + : '' + } + data-tooltip-id='table-tip' + > {typeof row[c.field] === 'string' && row[c.field].length > c.maxLength ? `${row[c.field].slice(0, c.maxLength)}...` - : row[c.field] - } - + : row[c.field]}