Highlighting compliance (#301)

* Make highlighting more resistant to external CSS, update unit tests * Make line height conditional in main.js, remove dashed line in coverage highlighting * Conditional in styling * Make uncoverage highlighting styling independent of coverage * Fix unit tests * Better variable naming
projecttacoma · Apr 9, 2024 · b40d9be · b40d9be
1 parent 87aec7b
commit b40d9be
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 29 deletions.
diff --git a/src/calculation/HTMLBuilder.ts b/src/calculation/HTMLBuilder.ts
@@ -18,28 +18,31 @@ export const cqlLogicClauseTrueStyle = {
   'background-color': '#ccebe0',
   color: '#20744c',
   'border-bottom-color': '#20744c',
-  'border-bottom-style': 'solid'
+  'border-bottom-style': 'solid',
+  'border-bottom-width': '0.35em'
 };
 
 export const cqlLogicClauseFalseStyle = {
   'background-color': '#edd8d0',
   color: '#a63b12',
   'border-bottom-color': '#a63b12',
-  'border-bottom-style': 'double'
+  'border-bottom-style': 'double',
+  'border-bottom-width': '0.35em'
 };
 
 export const cqlLogicClauseCoveredStyle = {
   'background-color': '#daeaf5',
-  color: '#004e82',
-  'border-bottom-color': '#006cb4',
-  'border-bottom-style': 'dashed'
+  color: '#004e82'
 };
 
 export const cqlLogicUncoveredClauseStyle = {
   'background-color': 'white',
-  color: 'black',
-  'border-bottom-color': 'white',
-  'border-bottom-style': 'solid'
+  color: 'black'
+};
+
+export const cqlLogicUncoveredUncoverageClauseStyle = {
+  'background-color': '#edd8d0',
+  color: '#a63b12'
 };
 
 /**
@@ -102,7 +105,7 @@ Handlebars.registerHelper('highlightUncoverage', (localId, context) => {
     )
   ) {
     // Mark with red styling if clause is found in uncoverage list
-    return objToCSS(cqlLogicClauseFalseStyle);
+    return objToCSS(cqlLogicUncoveredUncoverageClauseStyle);
   } else if (
     (context.data.root.coveredClauses as ClauseResult[]).some(
       result => result.libraryName === libraryName && result.localId === localId
@@ -211,7 +214,8 @@ export function generateHTML(
         libraryName: s.libraryName,
         statementName: s.statementName,
         clauseResults: clauseResults,
-        ...matchingExpression.annotation[0].s
+        ...matchingExpression.annotation[0].s,
+        highlightLogic: true
       });
       overallHTML += statementHTML;
       if (options?.buildStatementLevelHTML) {

diff --git a/src/templates/main.ts b/src/templates/main.ts
@@ -1,4 +1,4 @@
-export default `<pre style="tab-size: 2; border-bottom-width: 4px; line-height: 1.4"
+export default `<pre style="tab-size: 2 {{~#if @root.highlightLogic~}}; line-height: 1.51em{{~/if~}}"
   data-library-name="{{ libraryName }}" data-statement-name="{{ statementName }}">
 <code>
 {{> clause}}

diff --git a/test/unit/fixtures/html/simpleCoverageAnnotation.html b/test/unit/fixtures/html/simpleCoverageAnnotation.html
@@ -1,25 +1,25 @@
 <div>
   <h2>test Clause Coverage: 100%</h2>
   <pre
-    style="tab-size: 2; border-bottom-width: 4px; line-height: 1.4"
+    style="tab-size: 2"
     data-library-name="AnticoagulationTherapyforAtrialFibrillationFlutter"
     data-statement-name="Denominator"
   >
       <code>
-        <span data-ref-id="119" style="background-color:#daeaf5;color:#004e82;border-bottom-color:#006cb4;border-bottom-style:dashed">
+        <span data-ref-id="119" style="background-color:#daeaf5;color:#004e82">
           <span>define &quot;Denominator&quot;: </span>
-          <span data-ref-id="118" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
-            <span data-ref-id="116" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
-              <span data-ref-id="101" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
+          <span data-ref-id="118" style="background-color:white;color:black">
+            <span data-ref-id="116" style="background-color:white;color:black">
+              <span data-ref-id="101" style="background-color:white;color:black">
                 <span>&quot;Encounter with Atrial Ablation Procedure&quot;</span>
               </span>
               <span>union</span>
-              <span data-ref-id="115" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
+              <span data-ref-id="115" style="background-color:white;color:black">
                 <span>&quot;History of Atrial FibrillationFlutter&quot;</span>
               </span>
             </span>
             <span>union</span>
-            <span data-ref-id="117" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
+            <span data-ref-id="117" style="background-color:white;color:black">
               <span>&quot;Current Diagnosis Atrial FibrillationFlutter&quot;</span>
             </span>
           </span>

diff --git a/test/unit/fixtures/html/simpleCoverageAnnotation2.html b/test/unit/fixtures/html/simpleCoverageAnnotation2.html
@@ -1,25 +1,25 @@
 <div>
   <h2>test2 Clause Coverage: 100%</h2>
   <pre
-    style="tab-size: 2; border-bottom-width: 4px; line-height: 1.4"
+    style="tab-size: 2"
     data-library-name="AnticoagulationTherapyforAtrialFibrillationFlutter"
     data-statement-name="Denominator"
   >
         <code>
-          <span data-ref-id="119" style="background-color:#daeaf5;color:#004e82;border-bottom-color:#006cb4;border-bottom-style:dashed">
+          <span data-ref-id="119" style="background-color:#daeaf5;color:#004e82">
             <span>define &quot;Denominator&quot;: </span>
-            <span data-ref-id="118" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
-              <span data-ref-id="116" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
-                <span data-ref-id="101" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
+            <span data-ref-id="118" style="background-color:white;color:black">
+              <span data-ref-id="116" style="background-color:white;color:black">
+                <span data-ref-id="101" style="background-color:white;color:black">
                   <span>&quot;Encounter with Atrial Ablation Procedure&quot;</span>
                 </span>
                 <span>union</span>
-                <span data-ref-id="115" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
+                <span data-ref-id="115" style="background-color:white;color:black">
                   <span>&quot;History of Atrial FibrillationFlutter&quot;</span>
                 </span>
               </span>
               <span>union</span>
-              <span data-ref-id="117" style="background-color:white;color:black;border-bottom-color:white;border-bottom-style:solid">
+              <span data-ref-id="117" style="background-color:white;color:black">
                 <span>&quot;Current Diagnosis Atrial FibrillationFlutter&quot;</span>
               </span>
             </span>

diff --git a/test/unit/fixtures/html/simpleFalseAnnotation.html b/test/unit/fixtures/html/simpleFalseAnnotation.html
@@ -1,12 +1,12 @@
 <div>
   <h2>Population Group: test</h2>
   <pre
-    style="tab-size: 2; border-bottom-width: 4px; line-height: 1.4"
+    style="tab-size: 2; line-height: 1.51em"
     data-library-name="AnticoagulationTherapyforAtrialFibrillationFlutter"
     data-statement-name="Denominator"
   >
     <code>
-      <span data-ref-id="119" style="background-color:#edd8d0; color:#a63b12; border-bottom-color:#a63b12; border-bottom-style:double">
+      <span data-ref-id="119" style="background-color:#edd8d0; color:#a63b12; border-bottom-color:#a63b12; border-bottom-style:double;border-bottom-width:0.35em">
         <span>define &quot;Denominator&quot;: </span>
         <span data-ref-id="118" style="">
           <span data-ref-id="116" style="">

diff --git a/test/unit/fixtures/html/simpleTrueAnnotation.html b/test/unit/fixtures/html/simpleTrueAnnotation.html
@@ -1,12 +1,12 @@
 <div>
   <h2>Population Group: test</h2>
   <pre
-    style="tab-size: 2; border-bottom-width: 4px; line-height: 1.4"
+    style="tab-size: 2; line-height: 1.51em"
     data-library-name="AnticoagulationTherapyforAtrialFibrillationFlutter"
     data-statement-name="Denominator"
   >
     <code>
-      <span data-ref-id="119" style="background-color:#ccebe0;color:#20744c;border-bottom-color:#20744c;border-bottom-style:solid">
+      <span data-ref-id="119" style="background-color:#ccebe0;color:#20744c;border-bottom-color:#20744c;border-bottom-style:solid;border-bottom-width:0.35em">
         <span>define &quot;Denominator&quot;: </span>
         <span data-ref-id="118" style="">
           <span data-ref-id="116" style="">