diff --git a/packages_rs/nextclade-web/src/components/Results/ResultsTable.tsx b/packages_rs/nextclade-web/src/components/Results/ResultsTable.tsx
index 1f7245543..f654ceff7 100644
--- a/packages_rs/nextclade-web/src/components/Results/ResultsTable.tsx
+++ b/packages_rs/nextclade-web/src/components/Results/ResultsTable.tsx
@@ -16,9 +16,7 @@ import {
} from 'src/state/settings.state'
import {
cladeNodeAttrDescsAtom,
- cladeNodeAttrKeysAtom,
phenotypeAttrDescsAtom,
- phenotypeAttrKeysAtom,
seqIndicesFilteredAtom,
sortAnalysisResultsAtom,
sortAnalysisResultsByKeyAtom,
@@ -69,9 +67,7 @@ export function ResultsTable() {
const columnWidthsPx = useRecoilValue(resultsTableColumnWidthsPxAtom)
const dynamicCladeColumnWidthPx = useRecoilValue(resultsTableDynamicCladeColumnWidthPxAtom)
const dynamicPhenotypeColumnWidthPx = useRecoilValue(resultsTableDynamicPhenotypeColumnWidthPxAtom)
- const cladeNodeAttrKeys = useRecoilValue(cladeNodeAttrKeysAtom)
const cladeNodeAttrDescs = useRecoilValue(cladeNodeAttrDescsAtom)
- const phenotypeAttrKeys = useRecoilValue(phenotypeAttrKeysAtom)
const phenotypeAttrDescs = useRecoilValue(phenotypeAttrDescsAtom)
const isResultsFilterPanelCollapsed = useRecoilValue(isResultsFilterPanelCollapsedAtom)
@@ -84,15 +80,15 @@ export function ResultsTable() {
columnWidthsPx,
dynamicCladeColumnWidthPx,
dynamicPhenotypeColumnWidthPx,
- cladeNodeAttrKeys,
- phenotypeAttrKeys,
+ cladeNodeAttrDescs,
+ phenotypeAttrDescs,
}))
}, [
- cladeNodeAttrKeys,
+ cladeNodeAttrDescs,
columnWidthsPx,
dynamicCladeColumnWidthPx,
dynamicPhenotypeColumnWidthPx,
- phenotypeAttrKeys,
+ phenotypeAttrDescs,
seqIndices,
viewedGene,
])
@@ -176,22 +172,24 @@ export function ResultsTable() {
}, []) // prettier-ignore
const dynamicCladeColumns = useMemo(() => {
- return cladeNodeAttrDescs.map(({ name: attrKey, displayName, description }) => {
- const sortAsc = sortByKey(attrKey, SortDirection.asc)
- const sortDesc = sortByKey(attrKey, SortDirection.desc)
- return (
-
-
- {displayName}
-
-
-
- {`Column: ${displayName}`}
- {description}
-
-
- )
- })
+ return cladeNodeAttrDescs
+ .filter((attr) => !attr.hideInWeb)
+ .map(({ name: attrKey, displayName, description }) => {
+ const sortAsc = sortByKey(attrKey, SortDirection.asc)
+ const sortDesc = sortByKey(attrKey, SortDirection.desc)
+ return (
+
+
+ {displayName}
+
+
+
+ {`Column: ${displayName}`}
+ {description}
+
+
+ )
+ })
}, [cladeNodeAttrDescs, dynamicCladeColumnWidthPx, sortByKey])
const dynamicPhenotypeColumns = useMemo(() => {
diff --git a/packages_rs/nextclade-web/src/components/Results/ResultsTableRow.tsx b/packages_rs/nextclade-web/src/components/Results/ResultsTableRow.tsx
index 0ace9d098..b73de3b79 100644
--- a/packages_rs/nextclade-web/src/components/Results/ResultsTableRow.tsx
+++ b/packages_rs/nextclade-web/src/components/Results/ResultsTableRow.tsx
@@ -2,6 +2,8 @@ import React, { memo, useMemo } from 'react'
import { areEqual, ListChildComponentProps } from 'react-window'
import { useRecoilValue } from 'recoil'
+import type { CladeNodeAttrDesc } from 'auspice'
+import type { PhenotypeAttrDesc } from 'src/types'
import { COLUMN_WIDTHS } from 'src/components/Results/ResultsTableStyle'
import { analysisResultAtom } from 'src/state/results.state'
import { ResultsTableRowError } from './ResultsTableRowError'
@@ -14,8 +16,8 @@ export interface TableRowDatum {
columnWidthsPx: Record
dynamicCladeColumnWidthPx: string
dynamicPhenotypeColumnWidthPx: string
- cladeNodeAttrKeys: string[]
- phenotypeAttrKeys: string[]
+ cladeNodeAttrDescs: CladeNodeAttrDesc[]
+ phenotypeAttrDescs: PhenotypeAttrDesc[]
}
export interface RowProps extends ListChildComponentProps {
@@ -31,8 +33,8 @@ function ResultsTableRowUnmemoed({ index, data, ...restProps }: RowProps) {
columnWidthsPx,
dynamicCladeColumnWidthPx,
dynamicPhenotypeColumnWidthPx,
- cladeNodeAttrKeys,
- phenotypeAttrKeys,
+ cladeNodeAttrDescs,
+ phenotypeAttrDescs,
} = useMemo(() => data[index], [data, index])
const { result, error } = useRecoilValue(analysisResultAtom(seqIndex))
@@ -49,8 +51,8 @@ function ResultsTableRowUnmemoed({ index, data, ...restProps }: RowProps) {
columnWidthsPx={columnWidthsPx}
dynamicCladeColumnWidthPx={dynamicCladeColumnWidthPx}
dynamicPhenotypeColumnWidthPx={dynamicPhenotypeColumnWidthPx}
- cladeNodeAttrKeys={cladeNodeAttrKeys}
- phenotypeAttrKeys={phenotypeAttrKeys}
+ cladeNodeAttrDescs={cladeNodeAttrDescs}
+ phenotypeAttrDescs={phenotypeAttrDescs}
viewedGene={viewedGene}
/>
)
diff --git a/packages_rs/nextclade-web/src/components/Results/ResultsTableRowResult.tsx b/packages_rs/nextclade-web/src/components/Results/ResultsTableRowResult.tsx
index 64e9dddc9..d04f9d95f 100644
--- a/packages_rs/nextclade-web/src/components/Results/ResultsTableRowResult.tsx
+++ b/packages_rs/nextclade-web/src/components/Results/ResultsTableRowResult.tsx
@@ -2,7 +2,7 @@ import { mix } from 'polished'
import React, { ReactNode, Suspense, useMemo } from 'react'
import { useRecoilValue } from 'recoil'
-import { QcStatus } from 'src/types'
+import { PhenotypeAttrDesc, QcStatus } from 'src/types'
import { ColumnClade } from 'src/components/Results/ColumnClade'
import { ColumnCustomNodeAttr } from 'src/components/Results/ColumnCustomNodeAttr'
import { ColumnFrameShifts } from 'src/components/Results/ColumnFrameShifts'
@@ -27,12 +27,13 @@ import { SequenceView } from 'src/components/SequenceView/SequenceView'
import { GENE_OPTION_NUC_SEQUENCE } from 'src/constants'
import { analysisResultAtom } from 'src/state/results.state'
import { ColumnCoverage } from 'src/components/Results/ColumnCoverage'
+import { CladeNodeAttrDesc } from 'auspice'
export interface ResultsTableRowResultProps {
index: number
viewedGene: string
- cladeNodeAttrKeys: string[]
- phenotypeAttrKeys: string[]
+ cladeNodeAttrDescs: CladeNodeAttrDesc[]
+ phenotypeAttrDescs: PhenotypeAttrDesc[]
columnWidthsPx: Record
dynamicCladeColumnWidthPx: string
dynamicPhenotypeColumnWidthPx: string
@@ -74,8 +75,8 @@ export function TableRowColored({
export function ResultsTableRowResult({
index,
viewedGene,
- cladeNodeAttrKeys,
- phenotypeAttrKeys,
+ cladeNodeAttrDescs,
+ phenotypeAttrDescs,
columnWidthsPx,
dynamicCladeColumnWidthPx,
dynamicPhenotypeColumnWidthPx,
@@ -118,15 +119,17 @@ export function ResultsTableRowResult({
- {cladeNodeAttrKeys.map((attrKey) => (
-
-
-
- ))}
-
- {phenotypeAttrKeys.map((attrKey) => (
-
-
+ {cladeNodeAttrDescs
+ .filter((attr) => !attr.hideInWeb)
+ .map(({ name }) => (
+
+
+
+ ))}
+
+ {phenotypeAttrDescs.map(({ name }) => (
+
+
))}
diff --git a/packages_rs/nextclade-web/src/state/results.state.ts b/packages_rs/nextclade-web/src/state/results.state.ts
index 5a807e378..1c0760272 100644
--- a/packages_rs/nextclade-web/src/state/results.state.ts
+++ b/packages_rs/nextclade-web/src/state/results.state.ts
@@ -215,23 +215,9 @@ export const hasTreeAtom = selector({
},
})
-const cladeNodeAttrDescsStorageAtom = atom({
- key: 'cladeNodeAttrDescsStorage',
- default: [],
-})
-
-export const cladeNodeAttrDescsAtom = selector({
+export const cladeNodeAttrDescsAtom = atom({
key: 'cladeNodeAttrDescs',
- get({ get }): CladeNodeAttrDesc[] {
- return get(cladeNodeAttrDescsStorageAtom).filter(({ hideInWeb }) => !hideInWeb)
- },
-
- set({ set, reset }, descs: CladeNodeAttrDesc[] | DefaultValue) {
- set(cladeNodeAttrDescsStorageAtom, descs)
- if (isDefaultValue(descs)) {
- reset(cladeNodeAttrDescsStorageAtom)
- }
- },
+ default: [],
})
export const cladeNodeAttrKeysAtom = selector({