From 0d6c7c4191e34778b3dc534eac7e81c2f2a845fb Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Wed, 17 Apr 2024 09:12:14 -0700
Subject: [PATCH] Add regions and other updates to help

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/pages/help.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/pages/help.vue b/src/pages/help.vue
index cb1531a..86f5f3a 100644
--- a/src/pages/help.vue
+++ b/src/pages/help.vue
@@ -4,7 +4,14 @@
     <f7-block>
       <h2>Quick Start</h2>
       <ol>
-        <li>Select the region of the body you want to identify structures from.</li>
+        <li>Select the region of the body you want to identify structures from. The regions are:
+          <ul>
+            <li><RegionIcon :region="0" class="list-region"/>Thorax and back</li>
+            <li><RegionIcon :region="1" class="list-region"/>Abdomen and pelvis</li>
+            <li><RegionIcon :region="2" class="list-region"/>Limbs</li>
+            <li><RegionIcon :region="3" class="list-region"/>Head and neck</li>
+          </ul>
+        </li>
         <li>Load an image:
           <ul>
             <li>Click on the camera icon <SvgIcon icon="photo_camera" class="list-svg"/> to take a new picture.
@@ -22,7 +29,7 @@
           <ul>
             <li>Click on each tag to see the structure highlighted in the image.</li>
             <li>Tag color and proportion filled indicate ALVINN's level of confidence in the identification.</li>
-            <li>If there are potential structures that do not satisfy the current detection threshold, a badge on the detection menu icon <SvgIcon icon="visibility" class="list-svg"/> will indicate the number of un-displayed structures.</li>
+            <li>If there are potential structures that do not satisfy the current detection settings, a badge on the detection menu icon <SvgIcon icon="visibility" class="list-svg"/> will indicate the number of un-displayed structures.</li>
           </ul>
         </li>
       </ol>
@@ -34,13 +41,14 @@
       </p>
       <ol>
         <li>Confidence slider: You can use the slider to change the confidence threshold for identifying structures. The default threshold is 50% confidence.</li>
-        <li>Refresh detections <SvgIcon icon="refresh_search" class="list-svg"/>: If there has been a permanent change to the structures detections, such as deleting a tag, the detection list can be reset to its original state.</li>
+        <li>Refresh detections <SvgIcon icon="refresh_search" class="list-svg"/>: If there has been a permanent change to the structure detection list, such as deleting a tag, the detection list can be reset to its original state.</li>
         <li>Structure list <SvgIcon icon="check_list" class="list-svg"/>: you can view a list of all the structures available for detection in that region and select/deselect individual structures for detection.</li>
       </ol>
     <h3>Submitting Images</h3>
       <p>
         If all of the detection tags that are currently visible have been viewed, then the cloud upload button <SvgIcon icon="cloud_upload" class="list-svg"/> on the detection menu will be enabled.
-        This button will cause the image and the verified structures to be uploaded to the ALVINN project servers where that data will be available for further training of the neural net. If after the image has been uploaded, the available detection tags change, then the option to re-upload the image will be available if all the new tags have been viewed and verified.
+        This button will cause the image and the verified structures to be uploaded to the ALVINN project servers where that data will become available for further training of the neural net.
+        If after the image has been uploaded, the available detection tags are changed via deletion or the detection settings options, then the option to re-upload the image will be available if all the new tags have been viewed and verified.
       </p>
     </f7-block>
   </f7-page>
@@ -57,6 +65,13 @@
     top: .5em;
   }
 
+  .list-region {
+    width: 3em;
+    position:relative;
+    top: 1em;
+    margin-right: .5em;
+  }
+
   .cap-button {
     background-color: var(--f7-theme-color);
     color: white;
@@ -80,10 +95,12 @@
 
 <script>
   import SvgIcon from '../components/svg-icon.vue'
+  import RegionIcon from '../components/region-icon.vue'
 
   export default {
     components: {
-      SvgIcon
+      SvgIcon,
+      RegionIcon
     }
   }
 </script>