From ae1a595087a81eed63118b00643190b95e21d52f Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Fri, 28 Jun 2024 23:04:14 +0000
Subject: [PATCH] Add UI enhancements (#185)

This PR:
* Adds color coded markers on the confidence slider
* Changes the confidence slider visual to be more intuitive (the highlight region covers the visible structures)
* Gives the tag container a max height so that too many tags doesn't reduce the image to 0 size

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: https://gitea.azgeorgis.net/ALVINN/ALVINN_f7/pulls/185
---
 src/css/detect.css   | 26 ++++++++++++++++++++++++++
 src/pages/detect.vue | 12 +++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/css/detect.css b/src/css/detect.css
index 650a347..d137d0f 100644
--- a/src/css/detect.css
+++ b/src/css/detect.css
@@ -89,6 +89,26 @@
   display: none;
 }
 
+.level-slide-marker {
+  border: var(--avn-slide-marker-border);
+  position: absolute;
+  top: 0%;
+  height: 100%;
+  left: var(--avn-slide-marker-position);
+}
+
+.range-bar {
+  background: var(--avn-theme-color);
+}
+
+.range-bar-active {
+  background: rgba(255,255,255,.8);
+}
+
+.dark .range-bar-active {
+  background: rgba(0,0,0,.8);
+}
+
 .image-menu {
   grid-area: menu-view;
   margin: 5px;
@@ -170,6 +190,12 @@
     display: block;
   }
 
+  .level-slide-marker {
+    top: calc(100% - var(--avn-slide-marker-position));
+    height: auto;
+    width: 100%;
+    left: 0%;
+  }
 
   .image-container {
     flex-direction: column;
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index aa36d4e..8e83f6a 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -26,7 +26,7 @@
           :href="infoLinkTarget"
         />
       </div>
-      <div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
+      <div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center; max-height: 450px;">
         <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
           :class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
           :id="(result.resultIndex == selectedChip) ? 'selected_chip' : ''"
@@ -45,8 +45,14 @@
         <f7-button @click="this.detectorLevel > 0 ? this.detectorLevel = 0 : this.detectorLevel = 50" style="flex: 0 1 20%">
           <SvgIcon :icon="this.detectorLevel > 0 ? 'visibility' : 'reset_slide'"/>
         </f7-button>
-        <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/>
-        <f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 100%"/>
+        <div style="position: relative; flex: 1 1 100%">
+          <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range"/>
+          <f7-range class="level-slide-vert" vertical :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range"/>
+          <div v-for="result in showResults.filter( r => { return r.isSearched && !r.isDeleted })"
+            class="level-slide-marker"
+            :style="`--avn-slide-marker-border: solid hsla(${result.confidence * 1.2}deg, 100%, 50%, .33) 1px; --avn-slide-marker-position: ${result.confidence.toFixed(1)}%`"
+          ></div>
+        </div>
         <f7-button @click="() => detectPanel = !detectPanel" :panel-open="!detectPanel && `#${detectorName}-settings`" :panel-close="detectPanel && `#${detectorName}-settings`" style="flex: 0 1 20%">
           <SvgIcon icon="check_list"/>
         </f7-button>