Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

949 genes get pascal cased in edit page #968

Merged
merged 4 commits into from
Feb 13, 2024
Merged

949 genes get pascal cased in edit page #968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1cf2608
fix(website): only use sentence case for metadata fields
bh-ethz Feb 9, 2024
59b20a4
fix(website): update tests to expect correct case on field names
bh-ethz Feb 9, 2024
99b35dc
fix(website): fix input field name property being modified incorrectly
bh-ethz Feb 9, 2024
fbd9bd9
Revert "fix(website): fix input field name property being modified in…
bh-ethz Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions website/src/components/Edit/DataRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { sentenceCase } from 'change-case';
import { type FC } from 'react';

import { InputField, type KeyValuePair, type Row } from './InputField.tsx';
Expand All @@ -15,7 +14,7 @@ export const EditableDataRow: FC<EditableRowProps> = ({ row, onChange }) => {

return (
<tr>
<td className={`w-1/4 ${colorClassName}`}>{sentenceCase(row.key)}:</td>
<td className={`w-1/4 ${colorClassName}`}>{row.key}:</td>
<td className='pr-3 text-right '>
<ErrorAndWarningIcons row={row} />
</td>
Expand Down Expand Up @@ -55,7 +54,7 @@ type ProcessedDataRowProps = {

export const ProcessedDataRow: FC<ProcessedDataRowProps> = ({ row }) => (
<tr>
<td className={`w-1/4 `}>{sentenceCase(row.key)}:</td>
<td className={`w-1/4 `}>{row.key}:</td>
<td />
<td className='w-full'>
<div className='px-3'>{row.value}</div>{' '}
Expand Down
22 changes: 16 additions & 6 deletions website/src/components/Edit/EditPage.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,13 @@ describe('EditPage', () => {
renderEditPage();

expect(screen.getByText(/Original Data/i)).toBeInTheDocument();
expectTextInSequenceData.original(defaultReviewData.originalData.metadata);
expectTextInSequenceData.originalMetadata(defaultReviewData.originalData.metadata);

expect(screen.getAllByText(/Unaligned nucleotide sequences/i)[0]).toBeInTheDocument();
expectTextInSequenceData.original(defaultReviewData.originalData.unalignedNucleotideSequences);

expect(screen.getByText(/Processed Data/i)).toBeInTheDocument();
expectTextInSequenceData.processed(defaultReviewData.processedData.metadata);
expectTextInSequenceData.processedMetadata(defaultReviewData.processedData.metadata);
expectTextInSequenceData.processed(defaultReviewData.processedData.unalignedNucleotideSequences);

expect(screen.getByText(/^Aligned nucleotide sequences/i)).toBeInTheDocument();
Expand All @@ -121,10 +121,10 @@ describe('EditPage', () => {
expect(screen.getByText(/Amino acid sequences/i)).toBeInTheDocument();
expectTextInSequenceData.processed(defaultReviewData.processedData.alignedAminoAcidSequences);

expect(screen.getByText('Processed insertion sequence name:')).toBeInTheDocument();
expect(screen.getByText('processedInsertionSequenceName:')).toBeInTheDocument();
expect(screen.getByText('nucleotideInsertion1,nucleotideInsertion2')).toBeInTheDocument();

expect(screen.getByText('Processed insertion gene name:')).toBeInTheDocument();
expect(screen.getByText('processedInsertionGeneName:')).toBeInTheDocument();
expect(screen.getByText('aminoAcidInsertion1,aminoAcidInsertion2')).toBeInTheDocument();
});

Expand All @@ -146,24 +146,34 @@ describe('EditPage', () => {
const someTextToAdd = '_addedText';
await userEvent.type(screen.getByDisplayValue(editableEntry), someTextToAdd);

expectTextInSequenceData.original({
expectTextInSequenceData.originalMetadata({
[metadataKey]: editableEntry + someTextToAdd,
});
const undoButton = document.querySelector(`.tooltip[data-tip="Revert to: ${editableEntry}"]`);
expect(undoButton).not.toBeNull();

await userEvent.click(undoButton!);
expectTextInSequenceData.original(defaultReviewData.originalData.metadata);
expectTextInSequenceData.originalMetadata(defaultReviewData.originalData.metadata);
});
});

const expectTextInSequenceData = {
original: (metadata: Record<string, MetadataField>): void =>
Object.entries(metadata).forEach(([key, value]) => {
expect(screen.getByText(key + ':')).toBeInTheDocument();
expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
}),
originalMetadata: (metadata: Record<string, MetadataField>): void =>
Object.entries(metadata).forEach(([key, value]) => {
expect(screen.getByText(sentenceCase(key) + ':')).toBeInTheDocument();
expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
}),
processed: (metadata: Record<string, MetadataField>): void =>
Object.entries(metadata).forEach(([key, value]) => {
expect(screen.getByText(key + ':')).toBeInTheDocument();
expect(screen.getByText(value.toString())).toBeInTheDocument();
}),
processedMetadata: (metadata: Record<string, MetadataField>): void =>
Object.entries(metadata).forEach(([key, value]) => {
expect(screen.getByText(sentenceCase(key) + ':')).toBeInTheDocument();
expect(screen.getByText(value.toString())).toBeInTheDocument();
Expand Down
31 changes: 17 additions & 14 deletions website/src/components/Edit/EditPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,19 +199,22 @@ type EditableOriginalDataProps = {
const EditableOriginalData: FC<EditableOriginalDataProps> = ({ editedMetadata, setEditedMetadata }) => (
<>
<Subtitle title='Metadata' />
{editedMetadata.map((field) => (
<EditableDataRow
key={'raw_metadata' + field.key}
row={field}
onChange={(editedRow: Row) =>
setEditedMetadata((prevRows: Row[]) =>
prevRows.map((prevRow) =>
prevRow.key === editedRow.key ? { ...prevRow, value: editedRow.value } : prevRow,
),
)
}
/>
))}
{editedMetadata.map((field) => {
field.key = sentenceCase(field.key);
Copy link
Contributor

@corneliusroemer corneliusroemer Mar 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This addition of sentenceCase here might be the cause of #1261

return (
<EditableDataRow
key={'raw_metadata' + field.key}
row={field}
onChange={(editedRow: Row) =>
setEditedMetadata((prevRows: Row[]) =>
prevRows.map((prevRow) =>
prevRow.key === editedRow.key ? { ...prevRow, value: editedRow.value } : prevRow,
),
)
}
/>
);
})}
</>
);

Expand Down Expand Up @@ -245,7 +248,7 @@ const ProcessedMetadata: FC<ProcessedMetadataProps> = ({ processedMetadata }) =>
<>
<Subtitle title='Metadata' customKey='preprocessing_metadata' />
{Object.entries(processedMetadata).map(([key, value]) => (
<ProcessedDataRow key={'processed' + key} row={{ key, value: value.toString() }} />
<ProcessedDataRow key={'processed' + key} row={{ key: sentenceCase(key), value: value.toString() }} />
))}
</>
);
Expand Down
Loading