Viewer updates from connectathon Jan '25

src/lib/components/resource-templates/AdvanceDirective.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { base64toBlob } from '$lib/utils/util';
-  import type { DocumentReferencePOLST } from '$lib/utils/types';
+  import type { DocumentReferencePOLST, ResourceTemplateParams } from '$lib/utils/types';
+  
+  export let content: ResourceTemplateParams<DocumentReferencePOLST>; // Define a prop to pass the data to the component
 
-  export let resource: DocumentReferencePOLST; // Define a prop to pass the data to the component
+  let resource: DocumentReferencePOLST = content.resource;
 
   /** Determine if any extension has the revoked status
   let isRevoked = false;

src/lib/components/resource-templates/AllergyIntolerance.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { AllergyIntolerance } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  
+  export let content: ResourceTemplateParams<AllergyIntolerance>; // Define a prop to pass the data to the component
 
-  export let resource: AllergyIntolerance; // Define a prop to pass the data to the component
+  let resource: AllergyIntolerance = content.resource;
 
   function badgeColor(criticality: string) {
     if (criticality) {

src/lib/components/resource-templates/Condition.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { Condition } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
 
-  export let resource : Condition; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Condition>; // Define a prop to pass the data to the component
+
+  let resource: Condition = content.resource;
 
   function badgeColor(severity: string) {
     if (severity) {
@@ -57,9 +60,12 @@
     <strong>{resource.code.text}</strong><br>
   {/if}
 {/if}
-{#if resource.bodySite}
-  Site: {resource.bodySite}<br>
+{#if resource.bodySite?.[0]?.coding?.[0]?.display}
+  Site: {resource.bodySite[0]?.coding?.[0]?.display}<br>
 {/if}
 {#if resource.onsetDateTime}
-  Since {resource.onsetDateTime.split("T")[0]}<br>
+  Since: {resource.onsetDateTime.split("T")[0]}<br>
+{/if}
+{#if resource.recordedDate}
+  Recorded: {resource.recordedDate.split("T")[0]}<br>
 {/if}

src/lib/components/resource-templates/Consent.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Badge } from 'sveltestrap';
+  import type { Consent } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+
+  export let content: ResourceTemplateParams<Consent>; // Define a prop to pass the data to the component
+
+  let resource: Consent = content.resource;
+</script>
+{#if resource.text?.div}
+  {@html resource.text.div}
+  <br>
+{/if}
+{#if resource.category?.[0]}
+  {#if resource.category[0].coding}
+    <Badge color="primary">{resource.category[0].coding[0].system} : {resource.category[0].coding[0].code}</Badge>
+    <br />
+    {#if resource.category[0].coding[0].display}
+      <strong>{resource.category[0].coding[0].display}</strong>
+    {:else if resource.category[0].text}
+      <strong>{resource.category[0].text}</strong>
+    {/if}
+    <br>
+  {:else if resource.category[0].text}
+    <strong>{resource.category[0].text}</strong>
+    <br>
+  {/if}
+{/if}
+{#if resource.provision?.code?.[0].coding}
+  Intent: {resource.provision?.code?.[0].coding[0].display}
+{/if}

src/lib/components/resource-templates/DiagnosticReport.svelte

@@ -1,42 +1,91 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
-  import type { DiagnosticReport } from 'fhir/r4';
+  import type { BundleEntry, DiagnosticReport, Observation } from 'fhir/r4';
+  import ObservationTemplate from './Observation.svelte';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  import { getEntry } from '$lib/utils/util';
 
-  export let resource: DiagnosticReport; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<DiagnosticReport>; // Define a prop to pass the data to the component
+
+  let resource: DiagnosticReport = content.resource;
+
+  let results: Observation[] | undefined = [];
+
+  $: {
+    if (resource) {
+      if (resource.result) {
+        for (let result of resource.result) {
+          if (result.reference) {
+            let resultResource;
+            if (resource.contained?.[0]?.resourceType === 'Observation') {
+              // If the result observation is contained in the resource
+              resultResource = resource.contained[0];
+            } else {
+              // If the result observation is referenced
+              resultResource = getEntry(
+                content.entries as BundleEntry[],
+                result.reference
+              ) as Observation;
+            }
+            if (resultResource) {
+              results.push(resultResource);
+            }
+          }
+        }
+      }
+    }
+  }
 </script>
 
+{#if resource.category?.[0].coding}
+  <Badge color="primary">{resource.category[0].coding[0].display ?? resource.category[0].coding[0].code}</Badge>
+{/if}
 {#if resource.code}
   {#if resource.code.coding}
     <Badge color="primary">{resource.code.coding[0].system} : {resource.code.coding[0].code}</Badge>
     <br />
     {#if resource.code.coding[0].display}
-      <strong>{resource.code.coding[0].display}</strong><br>
+      <strong>{resource.code.coding[0].display}</strong>
     {:else if resource.code.text}
-      <strong>{resource.code.text}</strong><br>
+      <strong>{resource.code.text}</strong>
     {/if}
   {:else if resource.code.text}
-    <strong>{resource.code.text}</strong><br>
+    <br><strong>{resource.code.text}</strong>
   {/if}
 {/if}
-{#if resource.effectivePeriod?.start}
-  Effective {resource.effectivePeriod.start}{resource.effectivePeriod.end
+<br>
+{#if resource.effectivePeriod}
+  Effective: {resource.effectivePeriod.start ? resource.effectivePeriod.start : ''}{resource
+    .effectivePeriod.end
     ? ` - ${resource.effectivePeriod.end}`
     : ''}
 {:else if resource.effectiveDateTime}
-    Date: {resource.effectiveDateTime.split("T")[0]}
+  Date: {resource.effectiveDateTime.split('T')[0]}
 {/if}
 <br>
 {#if resource.result}
-    <table class="table table-bordered table-sm">
-        <thead>
-        <tr><th colspan="5">Result(s)</th></tr>
-        </thead>
-        {#each resource.result as result}
-            {#if result.display}
-            <tr>
-                <td>{result.display}</td>
-            </tr>
-            {/if}
-        {/each}
-    </table>
+  <table class="table table-bordered table-sm">
+    <thead>
+      <tr><th>Result(s)</th></tr>
+    </thead>
+    <tbody>
+    {#each results as result}
+      <tr>
+        <div class="ml-4">
+          <ObservationTemplate
+            content={{ resource: result, entries: content.entries }}
+            contained={resource.effectiveDateTime !== undefined || resource.effectivePeriod !== undefined}
+          />
+        </div>
+      </tr>
+    {/each}
+    {#each resource.result as result}
+      {#if result.display}
+        <tr>
+          <td>{result.display}</td>
+        </tr>
+      {/if}
+    {/each}
+    </tbody>
+  </table>
 {/if}

src/lib/components/resource-templates/Dosage.svelte

@@ -5,6 +5,13 @@
 </script>
 
 {#if dosage}
+  {#if dosage.text}
+    Dosage: {dosage.text}
+  {:else if dosage.asNeededBoolean}
+    Dosage: as needed
+  {:else}
+    <span class="text-muted">No dosage information</span>
+  {/if}
   {#if dosage.route?.coding || dosage.doseAndRate || dosage.timing?.repeat}
     <table class="table table-bordered table-sm">
       <thead>
@@ -17,24 +24,20 @@
           <th scope="col">Freq. Period</th>
         </tr>
       </thead>
-      <tr>
-        <td>{dosage.route?.coding?.[0].display ?? ''}</td>
-        <td>{dosage.doseAndRate?.[0].doseQuantity?.value ?? ''}</td>
-        <td>{dosage.doseAndRate?.[0].doseQuantity?.unit ?? ''}</td>
-        <td>{dosage.timing?.repeat?.count ?? ''}</td>
-        <td>
-          {#if dosage.timing?.repeat?.period && dosage.timing?.repeat?.periodUnit}
-            {dosage.timing?.repeat?.period}{dosage.timing?.repeat?.periodUnit}
-          {/if}
-        </td>
-      </tr>
+      <tbody>
+        <tr>
+          <td>{dosage.route?.coding?.[0].display ?? ''}</td>
+          <td>{dosage.doseAndRate?.[0].doseQuantity?.value ?? ''}</td>
+          <td>{dosage.doseAndRate?.[0].doseQuantity?.unit ?? ''}</td>
+          <td>{dosage.timing?.repeat?.count ?? ''}</td>
+          <td>
+            {#if dosage.timing?.repeat?.period && dosage.timing?.repeat?.periodUnit}
+              {dosage.timing?.repeat?.period}{dosage.timing?.repeat?.periodUnit}
+            {/if}
+          </td>
+        </tr>
+    </tbody>
     </table>
-  {:else if dosage.text}
-    Dosage: {dosage.text}
-  {:else if dosage.asNeededBoolean}
-    Dosage: as needed
-  {:else}
-    <span class="text-muted">No dosage information</span>
   {/if}
 {:else}
   <span class="text-muted">No dosage information</span>

src/lib/components/resource-templates/Encounter.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { Encounter } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  
+  export let content: ResourceTemplateParams<Encounter>; // Define a prop to pass the data to the component
 
-  export let resource: Encounter; // Define a prop to pass the data to the component
+  let resource: Encounter = content.resource;
 </script>
 
 {#if resource.period?.start}

src/lib/components/resource-templates/Immunization.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import { Badge } from 'sveltestrap';
   import type { Immunization } from 'fhir/r4';
+  import type { ResourceTemplateParams } from '$lib/utils/types';
+  
+  export let content: ResourceTemplateParams<Immunization>; // Define a prop to pass the data to the component
 
-  export let resource: Immunization; // Define a prop to pass the data to the component
+  let resource: Immunization = content.resource;
 </script>
 {#if resource.vaccineCode}
   {#if resource.vaccineCode.coding}

src/lib/components/resource-templates/Location.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { Location } from "fhir/r4";
+  import type { ResourceTemplateParams } from '$lib/utils/types';
   
-  export let resource: Location; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Location>; // Define a prop to pass the data to the component
+
+  let resource: Location = content.resource;
 </script>
 
 <strong>{resource.name ?? ""}</strong>

src/lib/components/resource-templates/Medication.svelte

@@ -1,23 +1,41 @@
 <script lang="ts">
   import { Badge} from 'sveltestrap';
   import type { Medication } from "fhir/r4";
+  import type { ResourceTemplateParams } from '$lib/utils/types';
 
-  export let resource: Medication; // Define a prop to pass the data to the component
+  export let content: ResourceTemplateParams<Medication>; // Define a prop to pass the data to the component
+
+  let resource: Medication = content.resource;
+  let codingMap = new Map();
 </script>
 
 {#if resource.code}
   {#if resource.code.coding}
     <Badge color="primary">{resource.code.coding[0].system} : {resource.code.coding[0].code}</Badge>
     <br />
-    {#if resource.code.coding[0].display}
-      <strong>{resource.code.coding[0].display}</strong><br>
-    {:else if resource.code.text}
-      <strong>{resource.code.text}</strong><br>
-    {/if}
-  {:else if resource.code.text}
-    <strong>{resource.code.text}</strong><br>
   {/if}
 {/if}
+{#if resource.code?.text}
+  {(codingMap.set(resource.code.text, 1) && undefined) ?? ""}
+  <strong>{resource.code.text}</strong><br>
+{/if}
+{#if resource.code?.coding}
+  {#each resource.code.coding as coding, index}
+    {#if !resource.code?.text && index == 0}
+      <strong>
+        {#if coding.display && !codingMap.get(coding.display)}
+          {(codingMap.set(coding.display, 1) && undefined) ?? ""}
+          {coding.display}<br>
+        {/if}
+      </strong>
+    {:else}
+      {#if coding.display && !codingMap.get(coding.display)}
+        {(codingMap.set(coding.display, 1) && undefined) ?? ""}
+        {coding.display}<br>
+      {/if}
+    {/if}
+  {/each}
+{/if}
 {#if resource.ingredient}
   <table class="table table-bordered table-sm">
     <thead>
@@ -30,14 +48,16 @@
         <th scope="col">Strength Denominator Unit</th>
       </tr>
     </thead>
+    <tbody>
     {#each resource.ingredient as ingredient}
-      <tr>
+      <tr style="text-align: center !important">
         <td>{ingredient.itemCodeableConcept?.coding?.[0].display}</td>
         <td>{ingredient.strength?.numerator?.value}</td>
         <td>{ingredient.strength?.numerator?.unit}</td>
         <td>{ingredient.strength?.denominator?.value}</td>
         <td>{ingredient.strength?.denominator?.unit}</td>
       </tr>
     {/each}
+    </tbody>
   </table>
 {/if}