From 3c1a981af9c435d6032280bd81362a31a30557b2 Mon Sep 17 00:00:00 2001
From: Birm <birm@rbirm.us>
Date: Fri, 6 Oct 2023 14:59:18 -0400
Subject: [PATCH] chaning ordering of reactivity

---
 apps/labeling/roiSelection.html | 13 ++++--------
 apps/labeling/roiSelection.js   | 35 +++++++++++++--------------------
 2 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/apps/labeling/roiSelection.html b/apps/labeling/roiSelection.html
index 8c35c45c4..8d9f1d8df 100644
--- a/apps/labeling/roiSelection.html
+++ b/apps/labeling/roiSelection.html
@@ -316,11 +316,11 @@ <h5 class="modal-title" style="font-size: 1.5rem;">Modal title</h5>
               </div>
               <div style="padding: 0 0 0.5rem 2.5rem">
                 <label>
-                  <input type="radio" id="tt_radio_1" name="tissue_type" class="tissue_check" value="Tumor with Stroma" onchange="console.log(this)" /> Tumor with Stroma </label>
+                  <input disabled type="radio" id="tt_radio_1" name="tissue_type" class="tissue_check" value="Tumor with Stroma" onchange="console.log(this)" /> Tumor with Stroma </label>
               </div>
               <div style="padding: 0 0 0.5rem 2.5rem">
                 <label>
-                  <input type="radio" id="tt_radio_2" name="tissue_type" class="tissue_check" value="Invasive Margin" onchange="console.log(this)" /> Invasive Margin </label>
+                  <input disabled type="radio" id="tt_radio_2" name="tissue_type" class="tissue_check" value="Invasive Margin" onchange="console.log(this)" /> Invasive Margin </label>
               </div>
               <div style="padding: 0 0 0.5rem 0.3rem">
                 <label>
@@ -328,11 +328,11 @@ <h5 class="modal-title" style="font-size: 1.5rem;">Modal title</h5>
               </div>
               <div style="padding: 0 0 0.5rem 2.5rem">
                 <label>
-                  <input type="radio" id="tt_radio_3" name="tissue_type" class="tissue_check" value="Inside tumor/margin with low/without stroma" onchange="console.log(this)" /> Inside tumor/margin with low/without stroma </label>
+                  <input disabled type="radio" id="tt_radio_3" name="tissue_type" class="tissue_check" data-show-pitfalls="1" value="Inside tumor/margin with low/without stroma" onchange="console.log(this)" /> Inside tumor/margin with low/without stroma </label>
               </div>
               <div style="padding: 0 0 0.5rem 2.5rem">
                 <label>
-                  <input type="radio" id="tt_radio_4" name="tissue_type" class="tissue_check" value="No proximal tumor" onchange="console.log(this)" /> No Proximal Tumor </label>
+                  <input disabled type="radio" id="tt_radio_4" name="tissue_type" class="tissue_check" data-show-pitfalls="1" value="No proximal tumor" onchange="console.log(this)" /> No Proximal Tumor </label>
               </div>
               <p id="new_roi_warn">
                 <b>Double click a location to create or reposition an ROI</b>
@@ -432,11 +432,6 @@ <h5 class="modal-title" style="font-size: 1.5rem;">Modal title</h5>
                   "> sTILs Density </div>
                 <hr />
               </div>
-              <div id='tissue_type_area' style="display:none;">
-                <div style="font-weight: bold; padding-bottom: 0.5rem"> Tissue Type: </div>
-                <div id="tumor_types">
-                </div>
-              </div>
               <hr />
               <div id="pitfalls_area" style="display: none;">
               <div style="font-weight: bold; padding-bottom: 0.5rem"> Pitfalls: </div>
diff --git a/apps/labeling/roiSelection.js b/apps/labeling/roiSelection.js
index 3c9be1572..5370abe74 100644
--- a/apps/labeling/roiSelection.js
+++ b/apps/labeling/roiSelection.js
@@ -1224,9 +1224,7 @@ function itsChangeHandler(x) {
     document.getElementById('vta').style.display = 'block';
     document.getElementById('til_message').style.display = 'block';
   } else {
-    // hide and reset next slider, tissue type, and pitfalls
-    document.getElementById('tissue_type_area').style.display = 'none';
-    document.getElementById('pitfalls_area').style.display = 'none';
+    // hide and reset next slider, and pitfalls
     document.getElementById('vta').style.display = 'none';
     document.getElementById('til_message').style.display = 'none';
     document.getElementById('vta_range').value = -1;
@@ -1247,15 +1245,10 @@ function itsChangeHandler(x) {
 }
 function vtaChangeHandler(x) {
   if (x.target.value >=0) {
-    document.getElementById('tissue_type_area').style.display = 'block';
+    document.getElementById('pitfalls_area').style.display = 'block';
   } else {
     // hide save button, tissue type, and pitfalls
     document.getElementById('save').style.display = 'none';
-    document.getElementById('tt_radio_1').checked = false;
-    document.getElementById('tt_radio_2').checked = false;
-    document.getElementById('tt_radio_3').checked = false;
-    document.getElementById('tt_radio_4').checked = false;
-    document.getElementById('tissue_type_area').style.display = 'none';
     document.getElementById('pitfalls_area').style.display = 'none';
   }
 }
@@ -1294,13 +1287,11 @@ function makeFormReactive() {
         document.getElementById('tt_radio_2').checked = false;
         document.getElementById('tt_radio_3').checked = false;
         document.getElementById('tt_radio_4').checked = false;
-        // document.getElementById('tissue_type_area').style.display = 'block';
         document.getElementById('pitfalls_area').style.display = 'none';
         // hide save button
         document.getElementById('save').style.display = 'none';
         if (e.target.value == 'Evaluable for sTILs') {
           // show sliders when evaluable
-          document.getElementById('tissue_type_area').style.display = 'none';
           document.getElementById('sliders').style.display = 'block';
           document.getElementById('vta').style.display = 'none';
           document.getElementById('til_message').style.display = 'none';
@@ -1312,7 +1303,6 @@ function makeFormReactive() {
         } else {
           // hide sliders when not evaluable
           document.getElementById('sliders').style.display = 'none';
-          document.getElementById('tissue_type_area').style.display = 'block';
           // tissue types 1 and 2 disable, 3 and 4 enaable
           document.getElementById('tt_radio_1').disabled = true;
           document.getElementById('tt_radio_2').disabled = true;
@@ -1324,15 +1314,19 @@ function makeFormReactive() {
   }
   for (let tt of tissueTypeRadios) {
     tt.addEventListener('change', function(e) {
-      // show pitfalls
-      document.getElementById('pitfalls_area').style.display = 'block';
-      // show save button
-      document.getElementById('save').style.display = 'block';
-      // reset pitfalls
-      let checkboxes = document.querySelectorAll('#left_menu input[type=checkbox]');
-      for (let check of checkboxes) {
-        check.checked = false;
+      if (tt.dataset.ShowPitfalls){
+        // show pitfalls
+        document.getElementById('pitfalls_area').style.display = 'block';
+        // show save button
+        document.getElementById('save').style.display = 'block';
+        // reset pitfalls
+        let checkboxes = document.querySelectorAll('#left_menu input[type=checkbox]');
+        for (let check of checkboxes) {
+          check.checked = false;
       }
+    } else {
+      document.getElementById('pitfalls_area').style.display = 'none';
+    }
     });
   }
 }
@@ -1368,7 +1362,6 @@ function resetForm() {
   for (let check of checkboxes) {
     check.checked = false;
   }
-  document.getElementById('tissue_type_area').style.display = 'none';
   document.getElementById('pitfalls_area').style.display = 'none';
   document.getElementById('save').style.display = 'none';
   document.getElementById('comments').value = "";