fix(web): crash when exporting files in web

Followup of #1006 The PR #1006 introduced a bug: it filters away hidden columns from recoil state, thus making them unavailable for export functions. The mismatch in expected columns caused crash on Rust side. Here I modify the filtering logic, moving it to the actual rendering site, instead of filtering globally. This way, hidden columns are not rendered, but are still be available for export.
nextstrain · Oct 4, 2022 · 4f5db09 · 4f5db09
1 parent ae49768
commit 4f5db09
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 60 deletions.
diff --git 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 (
-        <TableHeaderCell key={attrKey} basis={dynamicCladeColumnWidthPx} grow={0} shrink={0}>
-          <TableHeaderCellContent>
-            <TableCellText>{displayName}</TableCellText>
-            <ResultsControlsSort sortAsc={sortAsc} sortDesc={sortDesc} />
-          </TableHeaderCellContent>
-          <ButtonHelpStyled identifier={`btn-help-col-clade-${attrKey}`} tooltipWidth="600px">
-            <h5>{`Column: ${displayName}`}</h5>
-            <p>{description}</p>
-          </ButtonHelpStyled>
-        </TableHeaderCell>
-      )
-    })
+    return cladeNodeAttrDescs
+      .filter((attr) => !attr.hideInWeb)
+      .map(({ name: attrKey, displayName, description }) => {
+        const sortAsc = sortByKey(attrKey, SortDirection.asc)
+        const sortDesc = sortByKey(attrKey, SortDirection.desc)
+        return (
+          <TableHeaderCell key={attrKey} basis={dynamicCladeColumnWidthPx} grow={0} shrink={0}>
+            <TableHeaderCellContent>
+              <TableCellText>{displayName}</TableCellText>
+              <ResultsControlsSort sortAsc={sortAsc} sortDesc={sortDesc} />
+            </TableHeaderCellContent>
+            <ButtonHelpStyled identifier={`btn-help-col-clade-${attrKey}`} tooltipWidth="600px">
+              <h5>{`Column: ${displayName}`}</h5>
+              <p>{description}</p>
+            </ButtonHelpStyled>
+          </TableHeaderCell>
+        )
+      })
   }, [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
@@ -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<keyof typeof COLUMN_WIDTHS, string>
   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
@@ -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<keyof typeof COLUMN_WIDTHS, string>
   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({
         <ColumnClade analysisResult={analysisResult} />
       </TableCellAlignedLeft>
 
-      {cladeNodeAttrKeys.map((attrKey) => (
-        <TableCellAlignedLeft key={attrKey} basis={dynamicCladeColumnWidthPx} grow={0} shrink={0}>
-          <ColumnCustomNodeAttr sequence={analysisResult} attrKey={attrKey} />
-        </TableCellAlignedLeft>
-      ))}
-
-      {phenotypeAttrKeys.map((attrKey) => (
-        <TableCellAlignedLeft key={attrKey} basis={dynamicPhenotypeColumnWidthPx} grow={0} shrink={0}>
-          <ColumnCustomNodeAttr sequence={analysisResult} attrKey={attrKey} />
+      {cladeNodeAttrDescs
+        .filter((attr) => !attr.hideInWeb)
+        .map(({ name }) => (
+          <TableCellAlignedLeft key={name} basis={dynamicCladeColumnWidthPx} grow={0} shrink={0}>
+            <ColumnCustomNodeAttr sequence={analysisResult} attrKey={name} />
+          </TableCellAlignedLeft>
+        ))}
+
+      {phenotypeAttrDescs.map(({ name }) => (
+        <TableCellAlignedLeft key={name} basis={dynamicPhenotypeColumnWidthPx} grow={0} shrink={0}>
+          <ColumnCustomNodeAttr sequence={analysisResult} attrKey={name} />
         </TableCellAlignedLeft>
       ))}
 

diff --git 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<boolean>({
   },
 })
 
-const cladeNodeAttrDescsStorageAtom = atom<CladeNodeAttrDesc[]>({
-  key: 'cladeNodeAttrDescsStorage',
-  default: [],
-})
-
-export const cladeNodeAttrDescsAtom = selector<CladeNodeAttrDesc[]>({
+export const cladeNodeAttrDescsAtom = atom<CladeNodeAttrDesc[]>({
   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<string[]>({