Skip to content

Commit

Permalink
Merge pull request #1011 from nextstrain/fix/web-crash-on-export
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivan-aksamentov
ivan-aksamentov authored Oct 4, 2022
2 parents 19b1932 + 4f5db09 commit 70122ce
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 60 deletions.
46 changes: 22 additions & 24 deletions packages_rs/nextclade-web/src/components/Results/ResultsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@ import {
} from 'src/state/settings.state'
import {
cladeNodeAttrDescsAtom,
cladeNodeAttrKeysAtom,
phenotypeAttrDescsAtom,
phenotypeAttrKeysAtom,
seqIndicesFilteredAtom,
sortAnalysisResultsAtom,
sortAnalysisResultsByKeyAtom,
Expand Down Expand Up @@ -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)
Expand All @@ -84,15 +80,15 @@ export function ResultsTable() {
columnWidthsPx,
dynamicCladeColumnWidthPx,
dynamicPhenotypeColumnWidthPx,
cladeNodeAttrKeys,
phenotypeAttrKeys,
cladeNodeAttrDescs,
phenotypeAttrDescs,
}))
}, [
cladeNodeAttrKeys,
cladeNodeAttrDescs,
columnWidthsPx,
dynamicCladeColumnWidthPx,
dynamicPhenotypeColumnWidthPx,
phenotypeAttrKeys,
phenotypeAttrDescs,
seqIndices,
viewedGene,
])
Expand Down Expand Up @@ -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(() => {
Expand Down
14 changes: 8 additions & 6 deletions packages_rs/nextclade-web/src/components/Results/ResultsTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 {
Expand All @@ -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))
Expand All @@ -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}
/>
)
Expand Down
31 changes: 17 additions & 14 deletions packages_rs/nextclade-web/src/components/Results/ResultsTableRowResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -74,8 +75,8 @@ export function TableRowColored({
export function ResultsTableRowResult({
index,
viewedGene,
cladeNodeAttrKeys,
phenotypeAttrKeys,
cladeNodeAttrDescs,
phenotypeAttrDescs,
columnWidthsPx,
dynamicCladeColumnWidthPx,
dynamicPhenotypeColumnWidthPx,
Expand Down Expand Up @@ -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>
))}

Expand Down
18 changes: 2 additions & 16 deletions packages_rs/nextclade-web/src/state/results.state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[]>({
Expand Down

1 comment on commit 70122ce

@vercel
Copy link

@vercel vercel bot commented on 70122ce Oct 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nextclade – ./

nextclade-git-master-nextstrain.vercel.app
nextclade-nextstrain.vercel.app
nextclade.vercel.app

Please sign in to comment.