Skip to content

Commit

Permalink
increase width for ecr-viewer and improve responsiveness (#2307)
Browse files Browse the repository at this point in the history 
* change nav-wrapper to use rem

* add min-width to nav-wrapper to prevent from shrinking

* remove info-container class and unused div

* create main-container2 to hold all max, min, and width properties

* remove unused ecr-content

* use variables

* fix view-comment button

* rename top275 to top550

* update snapshot

* Set fixed=true and fullWidth-true for the ecr metdata RR table

* fix treatment details tables widths

* set width for rr table to be 25% for reportable condition and jurisdiction

* merge all utilities into one file

* add scroll bar horizontal back

* set min width to be 40 rem

* add width main to main

* change min widths for name and date time to 7.5rem

* fix layout of page

* update lab results table width

* change data field to be to grid-col rather than grid-col-auto
  • Loading branch information
@BobanL
BobanL authored Aug 7, 2024
1 parent 8e94714 commit e6d8dd6
Show file tree
Hide file tree
Showing 22 changed files with 570 additions and 542 deletions.
2 changes: 1 addition & 1 deletion containers/ecr-viewer/src/app/DataDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const DataDisplay: React.FC<{
</div>
<div
className={classNames(
"grid-col-auto maxw7 text-pre-line",
"grid-col maxw7 text-pre-line",
className,
item.className ? item.className : "",
)}
Expand Down
2 changes: 1 addition & 1 deletion containers/ecr-viewer/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body>{children}</body>
<body className={"overflow-x-auto"}>{children}</body>
</html>
);
}
20 changes: 17 additions & 3 deletions containers/ecr-viewer/src/app/services/labsService.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,21 +311,35 @@ export const evaluateDiagnosticReportData = (
mappings: PathMappings,
): React.JSX.Element | undefined => {
const columnInfo: ColumnInfoInput[] = [
{ columnName: "Component", infoPath: "observationComponent" },
{ columnName: "Value", infoPath: "observationValue" },
{ columnName: "Ref Range", infoPath: "observationReferenceRange" },
{
columnName: "Component",
infoPath: "observationComponent",
className: "minw-10 width-40",
},
{
columnName: "Value",
infoPath: "observationValue",
className: "minw-10 width-40",
},
{
columnName: "Ref Range",
infoPath: "observationReferenceRange",
className: "minw-10 width-20",
},
{
columnName: "Test Method",
infoPath: "observationDeviceReference",
applyToValue: (ref) => {
const device = evaluateReference(fhirBundle, mappings, ref) as Device;
return device.deviceName?.[0]?.name;
},
className: "minw-10 width-20",
},
{
columnName: "Lab Comment",
infoPath: "observationNote",
hiddenBaseText: "comment",
className: "minw-10 width-20",
},
];
return evaluateObservationTable(report, fhirBundle, mappings, columnInfo);
Expand Down
4 changes: 2 additions & 2 deletions containers/ecr-viewer/src/app/tests/components/SideNav.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,10 @@ describe("SectionConfig", () => {
expect(container.innerHTML).toContain('<a href="#section-1" class="">');
});

it("should have top-275 when non-integrated viewer", () => {
it("should have top-550 when non-integrated viewer", () => {
process.env.NEXT_PUBLIC_NON_INTEGRATED_VIEWER = "true";
render(<SideNav />);
expect(screen.getByRole("navigation")).toHaveClass("top-275");
expect(screen.getByRole("navigation")).toHaveClass("top-550");
});
it("should have top0 when integrated viewer", () => {
delete process.env.NEXT_PUBLIC_NON_INTEGRATED_VIEWER;
Expand Down
2 changes: 1 addition & 1 deletion containers/ecr-viewer/src/app/tests/components/__snapshots__/Clinical.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ exports[`Snapshot test for Clinical Notes should match snapshot for non table no
Miscellaneous Notes
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
<p>
This patient was only recently discharged for a recurrent GI bleed as described
Expand Down
28 changes: 14 additions & 14 deletions containers/ecr-viewer/src/app/tests/components/__snapshots__/Demographics.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ exports[`Demographics should match snapshot 1`] = `
Patient Name
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
Test patient
</div>
Expand All @@ -49,7 +49,7 @@ exports[`Demographics should match snapshot 1`] = `
DOB
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
06/01/1996
</div>
Expand All @@ -68,7 +68,7 @@ exports[`Demographics should match snapshot 1`] = `
Current Age
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
27
</div>
Expand All @@ -87,7 +87,7 @@ exports[`Demographics should match snapshot 1`] = `
Vital Status
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
Alive
</div>
Expand All @@ -106,7 +106,7 @@ exports[`Demographics should match snapshot 1`] = `
Sex
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
female
</div>
Expand All @@ -125,7 +125,7 @@ exports[`Demographics should match snapshot 1`] = `
Race
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
Asian/Pacific Islander
</div>
Expand All @@ -144,7 +144,7 @@ exports[`Demographics should match snapshot 1`] = `
Ethnicity
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
Not Hispanic or Latino
</div>
Expand All @@ -163,7 +163,7 @@ exports[`Demographics should match snapshot 1`] = `
Tribal
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
test
</div>
Expand All @@ -182,7 +182,7 @@ exports[`Demographics should match snapshot 1`] = `
Preferred Language
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
test
</div>
Expand All @@ -201,7 +201,7 @@ exports[`Demographics should match snapshot 1`] = `
Patient Address
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
test address
</div>
Expand All @@ -220,7 +220,7 @@ exports[`Demographics should match snapshot 1`] = `
County
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
test
</div>
Expand All @@ -239,7 +239,7 @@ exports[`Demographics should match snapshot 1`] = `
Contact
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
test contact
</div>
Expand All @@ -258,7 +258,7 @@ exports[`Demographics should match snapshot 1`] = `
Emergency Contact
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
N/A
</div>
Expand All @@ -277,7 +277,7 @@ exports[`Demographics should match snapshot 1`] = `
Patient IDs
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
123-4567-890
</div>
Expand Down
20 changes: 10 additions & 10 deletions containers/ecr-viewer/src/app/tests/components/__snapshots__/EcrMetadata.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ exports[`ECR Metadata should match snapshot 1`] = `
class="usa-summary-box__text"
>
<table
class="usa-table rrTable"
class="usa-table width-full src-components-Table-Table-module__fixed--Eq00W rrTable"
data-testid="table"
>
<caption>
Expand All @@ -30,7 +30,7 @@ exports[`ECR Metadata should match snapshot 1`] = `
<thead>
<tr>
<th
class="reportability_summary_header"
class="width-25p"
>
<span
class="usa-tooltip"
Expand Down Expand Up @@ -86,7 +86,7 @@ exports[`ECR Metadata should match snapshot 1`] = `
</span>
</th>
<th
class="reportability_summary_header"
class="width-25p"
>
<span
class="usa-tooltip"
Expand Down Expand Up @@ -178,7 +178,7 @@ exports[`ECR Metadata should match snapshot 1`] = `
eICR Identifier
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
1dd10047-2207-4eac-a993-0f706c88be5d
</div>
Expand Down Expand Up @@ -206,7 +206,7 @@ exports[`ECR Metadata should match snapshot 1`] = `
Date/Time eCR Created
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
2022-05-14T12:56:38Z
</div>
Expand All @@ -225,7 +225,7 @@ exports[`ECR Metadata should match snapshot 1`] = `
Sender Software
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
/>
</div>
<div
Expand All @@ -242,7 +242,7 @@ exports[`ECR Metadata should match snapshot 1`] = `
Sender Facility Name
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
PRM- Palmdale Regional Medical Center
</div>
Expand All @@ -261,7 +261,7 @@ exports[`ECR Metadata should match snapshot 1`] = `
Facility Address
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
38600 Medical Center Drive
Palmdale, CA
Expand All @@ -282,7 +282,7 @@ Palmdale, CA
Facility Contact
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
(661)382-5000
</div>
Expand All @@ -301,7 +301,7 @@ Palmdale, CA
Facility ID
</div>
<div
class="grid-col-auto maxw7 text-pre-line"
class="grid-col maxw7 text-pre-line"
>
2.16.840.1.113883.4.6
</div>
Expand Down
Loading

0 comments on commit e6d8dd6

Please sign in to comment.