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({