From 9ea421a6234cf7b59da358182d009856b594e0ab Mon Sep 17 00:00:00 2001 From: Jean Fernandez Date: Sun, 24 Mar 2024 23:19:53 -0400 Subject: [PATCH] Update observation and report-labs-observation components --- .../observation/observation.component.html | 2 +- .../observation/observation.component.spec.ts | 16 +++++++- .../observation/observation.component.ts | 21 +++++++--- .../observation/observation.stories.ts | 21 +++++++++- .../report-labs-observation.component.html | 4 +- .../report-labs-observation.component.scss | 5 +++ .../report-labs-observation.stories.ts | 40 +++++++++++++++++-- 7 files changed, 94 insertions(+), 15 deletions(-) diff --git a/frontend/src/app/components/fhir-card/resources/observation/observation.component.html b/frontend/src/app/components/fhir-card/resources/observation/observation.component.html index 5922653a4..417ae961e 100644 --- a/frontend/src/app/components/fhir-card/resources/observation/observation.component.html +++ b/frontend/src/app/components/fhir-card/resources/observation/observation.component.html @@ -14,7 +14,7 @@
{{displayModel?.sort_title}}

Observations are a central element in healthcare, used to support diagnosis, monitor progress, determine baselines and patterns and even capture demographic characteristics.

- +
details diff --git a/frontend/src/app/components/fhir-card/resources/observation/observation.component.spec.ts b/frontend/src/app/components/fhir-card/resources/observation/observation.component.spec.ts index c4adf3ce2..9960005bb 100644 --- a/frontend/src/app/components/fhir-card/resources/observation/observation.component.spec.ts +++ b/frontend/src/app/components/fhir-card/resources/observation/observation.component.spec.ts @@ -1,7 +1,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ObservationComponent } from './observation.component'; -import {RouterTestingModule} from '@angular/router/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { ObservationModel } from 'src/lib/models/resources/observation-model'; +import { observationR4Factory } from 'src/lib/fixtures/factories/r4/resources/observation-r4-factory'; +import { fhirVersions } from 'src/lib/models/constants'; +import { By } from '@angular/platform-browser'; describe('ObservationComponent', () => { let component: ObservationComponent; @@ -15,10 +19,18 @@ describe('ObservationComponent', () => { fixture = TestBed.createComponent(ObservationComponent); component = fixture.componentInstance; - fixture.detectChanges(); }); it('should create', () => { + fixture.detectChanges(); expect(component).toBeTruthy(); }); + + it('should not display a visualization if table is the only visualization type', () => { + component.displayModel = new ObservationModel(observationR4Factory.valueCodeableConcept().build(), fhirVersions.R4); + fixture.detectChanges(); + + expect(component.displayVisualization).toBeFalse(); + expect(fixture.debugElement.query(By.css('observation-visualization'))).toBeFalsy(); + }); }); diff --git a/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts b/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts index 64c44fd63..c9bf2e199 100644 --- a/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts +++ b/frontend/src/app/components/fhir-card/resources/observation/observation.component.ts @@ -22,6 +22,7 @@ export class ObservationComponent implements OnInit { @Input() isCollapsed: boolean = false tableData: TableRowItem[] = [] + displayVisualization: boolean = true constructor(public changeRef: ChangeDetectorRef, public router: Router) { } @@ -30,6 +31,14 @@ export class ObservationComponent implements OnInit { return } + let visualizationTypes = this.displayModel?.value_model?.visualizationTypes() + + // If only table is allowed, just don't display anything since we are already displaying + // everything in tabular format. + if (visualizationTypes.length == 1 && visualizationTypes[0] == 'table') { + this.displayVisualization = false + } + this.tableData.push( { label: 'Issued on', @@ -40,23 +49,23 @@ export class ObservationComponent implements OnInit { label: 'Subject', data: this.displayModel?.subject, data_type: TableRowItemDataType.Reference, - enabled: !!this.displayModel?.subject , + enabled: !!this.displayModel?.subject, }, { label: 'Coding', data: this.displayModel?.code, - data_type: TableRowItemDataType.Coding, + data_type: TableRowItemDataType.CodableConcept, enabled: !!this.displayModel?.code, }, { label: 'Value', - data: [this.displayModel?.value_quantity_value,this.displayModel?.value_quantity_unit].join(" "), - enabled: !!this.displayModel?.value_quantity_value, + data: this.displayModel?.value_model?.display(), + enabled: !!this.displayModel?.value_model, }, { label: 'Reference', - data: this.displayModel.referenceRangeDisplay(), - enabled: !!this.displayModel?.reference_range, + data: this.displayModel?.reference_range.display(), + enabled: !!this.displayModel?.reference_range.hasValue(), } ) } diff --git a/frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts b/frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts index aa6de0c71..54ea75e0b 100644 --- a/frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts +++ b/frontend/src/app/components/fhir-card/resources/observation/observation.stories.ts @@ -5,6 +5,7 @@ import { ObservationComponent } from "./observation.component"; import { ObservationModel } from "../../../../../lib/models/resources/observation-model"; import { RouterTestingModule } from '@angular/router/testing'; import { observationR4Factory } from 'src/lib/fixtures/factories/r4/resources/observation-r4-factory'; +import { codeableConceptR4Factory } from 'src/lib/fixtures/factories/r4/datatypes/codeable-concept-r4-factory'; const meta: Meta = { title: 'Fhir Card/Observation', @@ -34,7 +35,7 @@ const meta: Meta = { export default meta; type Story = StoryObj; -let observation = new ObservationModel(observationR4Factory.referenceRange().build(), fhirVersions.R4); +let observation = new ObservationModel(observationR4Factory.valueQuantity().referenceRange().build(), fhirVersions.R4); observation.source_id = '123-456-789' observation.source_resource_id = '123-456-789' export const Entry: Story = { @@ -42,3 +43,21 @@ export const Entry: Story = { displayModel: observation } }; + +let observation2 = new ObservationModel(observationR4Factory.valueCodeableConcept().code(codeableConceptR4Factory.text('Covid Test').build()).build(), fhirVersions.R4); +observation.source_id = '123-456-789' +observation.source_resource_id = '123-456-789' +export const CodeableConcept: Story = { + args: { + displayModel: observation2 + } +}; + +let observation3 = new ObservationModel(observationR4Factory.dataAbsent().build(), fhirVersions.R4); +observation.source_id = '123-456-789' +observation.source_resource_id = '123-456-789' +export const DataAbsent: Story = { + args: { + displayModel: observation3 + } +}; diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html index 4696fb489..c4e8b438c 100644 --- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html +++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.html @@ -53,8 +53,8 @@
-
- +
+
diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.scss b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.scss index e69de29bb..0e503d0be 100644 --- a/frontend/src/app/components/report-labs-observation/report-labs-observation.component.scss +++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.component.scss @@ -0,0 +1,5 @@ +.visualization-container { + max-height: 20em; + display: inline-block; + overflow: scroll; +} diff --git a/frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts b/frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts index 258545b6b..77ca95209 100644 --- a/frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts +++ b/frontend/src/app/components/report-labs-observation/report-labs-observation.stories.ts @@ -4,7 +4,7 @@ import { DecoratorFunction } from '@storybook/types'; import { ReportLabsObservationComponent } from './report-labs-observation.component' import { PipesModule } from 'src/app/pipes/pipes.module'; import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'; -import { ResourceFhir } from 'src/app/models/fasten/resource_fhir'; +import { IResourceRaw, ResourceFhir } from 'src/app/models/fasten/resource_fhir'; import { GlossaryLookupComponent } from '../glossary-lookup/glossary-lookup.component'; import { NgChartsModule } from 'ng2-charts'; import { HTTP_CLIENT_TOKEN } from 'src/app/dependency-injection'; @@ -14,7 +14,9 @@ import { Observable, of } from 'rxjs'; import R4Example1Json from "../../../lib/fixtures/r4/resources/observation/example1.json"; import { Html as GlossaryLookupHtml } from '../glossary-lookup/glossary-lookup.stories'; -import { ObservationBarChartComponent } from '../fhir-card/common/observation-bar-chart/observation-bar-chart.component'; +import { ObservationVisualizationComponent } from '../fhir-card/common/observation-visualization/observation-visualization.component'; +import { fhirVersions } from 'src/lib/models/constants'; +import { observationR4Factory } from 'src/lib/fixtures/factories/r4/resources/observation-r4-factory'; const withHttpClientProvider: DecoratorFunction = (storyFunc, context) => { @@ -40,7 +42,7 @@ const meta: Meta = { decorators: [ withHttpClientProvider, moduleMetadata({ - imports: [PipesModule, GlossaryLookupComponent, NgChartsModule, RouterTestingModule, HttpClientModule, ObservationBarChartComponent], + imports: [PipesModule, GlossaryLookupComponent, NgChartsModule, RouterTestingModule, HttpClientModule, ObservationVisualizationComponent], declarations: [ NgbCollapse ], providers: [], }) @@ -100,3 +102,35 @@ export const Entry: Story = { ...GlossaryLookupHtml.parameters } }; + + +const observation3: ResourceFhir = { + source_id: '', + source_resource_id: '', + source_resource_type: 'Observation', + fhir_version: '4', + sort_title: 'sort', + sort_date: new Date(), + resource_raw: observationR4Factory.valueCodeableConcept().build() as IResourceRaw, +}; + +const observation4: ResourceFhir = { + source_id: '', + source_resource_id: '', + source_resource_type: 'Observation', + fhir_version: '4', + sort_title: 'sort', + sort_date: new Date(), + resource_raw: observationR4Factory.valueCodeableConcept().build() as IResourceRaw, +}; + +export const CodableConcept: Story = { + args: { + observations: [observation3, observation4], + observationCode: '788-0', + observationTitle: 'Erythrocyte distribution width [Ratio] by Automated count', + }, + parameters: { + ...GlossaryLookupHtml.parameters + } +};