Skip to content

Commit 9c49b0a

Browse files
alopezoalopezo
committed
CDS System improvements
1 parent 71e9e36 commit 9c49b0a

7 files changed

Lines changed: 748 additions & 458 deletions

File tree

‎src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ import { BatchPatientDialogComponent } from './benefits-demo/batch-patient-dialo
119119
import { LicenseAgreementComponent } from './license-agreement/license-agreement.component';
120120
import { CookieConsentComponent } from './cookie-consent/cookie-consent.component';
121121
import { FormRecordsComponent } from './benefits-demo/form-records/form-records.component';
122+
import { CdsPanelComponent } from './benefits-demo/cds-panel/cds-panel.component';
122123

123124
const app = initializeApp(firebaseConfig);
124125

@@ -197,7 +198,8 @@ const app = initializeApp(firebaseConfig);
197198
BatchPatientDialogComponent,
198199
LicenseAgreementComponent,
199200
CookieConsentComponent,
200-
FormRecordsComponent
201+
FormRecordsComponent,
202+
CdsPanelComponent
201203
],
202204
bootstrap: [AppComponent],
203205
schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [BrowserModule,

‎src/app/benefits-demo/cds-panel/cds-panel.component.css‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
.cds-tab-container {
2+
background-color: #ffffff;
3+
border-radius: 12px;
4+
padding: 25px;
5+
margin-bottom: 25px;
6+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
7+
border-left: 4px solid #8e44ad;
8+
max-width: 1000px;
9+
}
10+
11+
.cds-tab-container h3 {
12+
color: #495057;
13+
margin-bottom: 15px;
14+
font-size: 1.2rem;
15+
font-weight: 600;
16+
}
17+
18+
.cds-description {
19+
color: #6c757d;
20+
margin-bottom: 24px;
21+
line-height: 1.5;
22+
font-size: 14px;
23+
}
24+
25+
.cds-status {
26+
background-color: #f8f9fa;
27+
border-radius: 8px;
28+
border: 1px solid #e9ecef;
29+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
30+
overflow: hidden;
31+
}
32+
33+
.cds-loading {
34+
display: flex;
35+
align-items: center;
36+
gap: 12px;
37+
padding: 24px;
38+
color: #007bff;
39+
}
40+
41+
.cds-error {
42+
display: flex;
43+
align-items: flex-start;
44+
gap: 12px;
45+
padding: 24px;
46+
color: #dc3545;
47+
background-color: #f8d7da;
48+
border-left: 4px solid #dc3545;
49+
}
50+
51+
.error-content {
52+
display: flex;
53+
flex-direction: column;
54+
gap: 8px;
55+
flex: 1;
56+
}
57+
58+
.error-content strong {
59+
font-weight: 600;
60+
}
61+
62+
.error-content span {
63+
font-size: 14px;
64+
line-height: 1.5;
65+
}
66+
67+
.cds-recommendations {
68+
padding: 24px;
69+
}
70+
71+
.recommendations-header {
72+
display: flex;
73+
align-items: center;
74+
gap: 12px;
75+
margin-bottom: 20px;
76+
padding-bottom: 16px;
77+
border-bottom: 1px solid #e9ecef;
78+
}
79+
80+
.recommendations-header mat-icon {
81+
color: #8e44ad;
82+
}
83+
84+
.recommendations-header span {
85+
color: #2c3e50;
86+
font-weight: 500;
87+
font-size: 16px;
88+
flex: 1;
89+
}
90+
91+
.recommendations-header button {
92+
color: #8e44ad;
93+
border-color: #8e44ad;
94+
}
95+
96+
.recommendations-header button:hover {
97+
background-color: rgba(142, 68, 173, 0.1);
98+
}
99+
100+
.cds-no-recommendations {
101+
display: flex;
102+
flex-direction: column;
103+
align-items: flex-start;
104+
gap: 12px;
105+
padding: 24px;
106+
color: #198754;
107+
}
108+
109+
.no-recommendations-content {
110+
display: flex;
111+
flex-direction: column;
112+
gap: 8px;
113+
align-items: flex-start;
114+
}
115+
116+
.no-recommendations-content strong {
117+
font-weight: 600;
118+
color: #198754;
119+
}
120+
121+
.no-recommendations-content span {
122+
font-size: 14px;
123+
line-height: 1.5;
124+
color: #495057;
125+
}
126+
127+
.cds-cards {
128+
display: flex;
129+
flex-direction: column;
130+
gap: 16px;
131+
}
132+
133+
.cds-card {
134+
margin: 0;
135+
border-radius: 8px;
136+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
137+
transition: box-shadow 0.2s ease;
138+
}
139+
140+
.cds-card:hover {
141+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
142+
}
143+
144+
.cds-card.indicator-info {
145+
border-left: 4px solid #0dcaf0;
146+
}
147+
148+
.cds-card.indicator-warning {
149+
border-left: 4px solid #ffc107;
150+
background-color: #fff8e1;
151+
}
152+
153+
.cds-card.indicator-critical {
154+
border-left: 4px solid #dc3545;
155+
background-color: #ffebee;
156+
}
157+
158+
.cds-card mat-card-header {
159+
padding-bottom: 8px;
160+
}
161+
162+
.cds-card mat-card-title {
163+
font-size: 16px;
164+
font-weight: 600;
165+
display: flex;
166+
align-items: center;
167+
gap: 8px;
168+
line-height: 1.3;
169+
}
170+
171+
.cds-card mat-card-title mat-icon {
172+
font-size: 20px;
173+
width: 20px;
174+
height: 20px;
175+
}
176+
177+
.cds-card mat-card-subtitle {
178+
font-size: 13px;
179+
color: #6c757d;
180+
margin-top: 4px;
181+
}
182+
183+
.cds-card mat-card-content {
184+
font-size: 14px;
185+
line-height: 1.5;
186+
color: #495057;
187+
}
188+
189+
.cds-card mat-card-actions {
190+
padding-top: 8px;
191+
border-top: 1px solid #f1f3f4;
192+
}
193+

‎src/app/benefits-demo/cds-panel/cds-panel.component.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<div class="cds-tab-container">
2+
<h3>Decision Support</h3>
3+
<p class="cds-description">
4+
Get medication order recommendations based on current patient conditions and medications using SNOMED CT Clinical Decision Support services.
5+
</p>
6+
7+
<!-- CDS Status -->
8+
<div class="cds-status">
9+
<div *ngIf="!isCdsLoading && !cdsResponse && !cdsError && !cdsNoDataMessage" style="text-align: center; padding: 20px;">
10+
<button mat-raised-button color="primary" (click)="submitToCdsService()" [disabled]="isCdsLoading">
11+
Request Recommendations
12+
</button>
13+
</div>
14+
15+
<div *ngIf="isCdsLoading" class="cds-loading">
16+
<mat-spinner diameter="24"></mat-spinner>
17+
<span>Requesting medication recommendations from CDS service...</span>
18+
</div>
19+
20+
<div *ngIf="cdsNoDataMessage" style="text-align: center; padding: 30px; color: #666;">
21+
<mat-icon color="accent" style="font-size: 48px; width: 48px; height: 48px; margin-bottom: 16px;">info</mat-icon>
22+
<p style="margin: 0; font-size: 14px; line-height: 1.5;">{{ cdsNoDataMessage }}</p>
23+
</div>
24+
25+
<div *ngIf="cdsError" class="cds-error">
26+
<mat-icon color="warn">error</mat-icon>
27+
<div class="error-content">
28+
<strong>Error:</strong>
29+
<span>{{ cdsError }}</span>
30+
<button mat-stroked-button color="primary" (click)="submitToCdsService()" style="margin-top: 8px;">
31+
Retry
32+
</button>
33+
</div>
34+
</div>
35+
36+
<div *ngIf="cdsResponse && cdsResponse.cards && cdsResponse.cards.length > 0" class="cds-recommendations">
37+
<div class="recommendations-header">
38+
<mat-icon color="primary">lightbulb</mat-icon>
39+
<span>{{ cdsResponse.cards.length }} recommendation(s) received</span>
40+
<button mat-stroked-button color="primary" (click)="submitToCdsService()" [disabled]="isCdsLoading">
41+
Refresh
42+
</button>
43+
</div>
44+
<div class="cds-cards">
45+
<mat-card *ngFor="let card of cdsResponse.cards; let i = index" class="cds-card" [ngClass]="'indicator-' + card.indicator">
46+
<mat-card-header>
47+
<mat-card-title>
48+
<mat-icon [color]="getCardIconColor(card.indicator)">{{ getCardIcon(card.indicator) }}</mat-icon>
49+
{{ card.summary }}
50+
</mat-card-title>
51+
<mat-card-subtitle>{{ card.source.label }}</mat-card-subtitle>
52+
</mat-card-header>
53+
<mat-card-content *ngIf="card.detail">
54+
<p>{{ card.detail }}</p>
55+
</mat-card-content>
56+
<mat-card-actions>
57+
<button mat-button *ngFor="let suggestion of card.suggestions" color="primary">
58+
{{ suggestion.label }}
59+
</button>
60+
<button mat-button
61+
*ngIf="card.source.url"
62+
color="accent"
63+
(click)="openSourceUrl(card.source.url)"
64+
title="View source">
65+
<mat-icon>open_in_new</mat-icon>
66+
View Source
67+
</button>
68+
</mat-card-actions>
69+
</mat-card>
70+
</div>
71+
</div>
72+
73+
<div *ngIf="cdsResponse && (!cdsResponse.cards || cdsResponse.cards.length === 0)" class="cds-no-recommendations">
74+
<mat-icon color="accent">check_circle</mat-icon>
75+
<div class="no-recommendations-content">
76+
<strong>No specific recommendations</strong>
77+
<span>No medication order recommendations at this time based on current conditions and medications.</span>
78+
<button mat-stroked-button color="primary" (click)="submitToCdsService()" [disabled]="isCdsLoading" style="margin-top: 8px;">
79+
Refresh
80+
</button>
81+
</div>
82+
</div>
83+
</div>
84+
</div>

0 commit comments

Comments
 (0)