Move result filter to app (#43)

Also changed chip colors to gradient from indexed list.

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

Reviewed-on: Georgi_Lab/ALVINN_f7#43

src/pages/detect.vue

@@ -14,7 +14,16 @@
         <div ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" />
       </div>
       <div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
-        <f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
+        <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
+          :class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
+          :text="result.label"
+          media=" "
+          :tooltip="result.confidence.toFixed(1)"
+          deleteable
+          @click="selectChip(result.resultIndex)"
+          @delete="deleteChip(result.resultIndex)"
+          :style="chipGradient(result.confidence)"
+        />
       </div>
       <f7-segmented class="image-menu" raised>
         <f7-button popover-open="#region-popover">
@@ -99,6 +108,10 @@
     align-self: stretch;
   }
 
+  .chip-media {
+    background-color: var(--chip-media-background) !important;
+  }
+
   .chip-results {
     display: flex;
     flex-wrap: wrap;
@@ -271,13 +284,24 @@
     computed: {
       debugDisplay () {
         return this.debugText.join('<br/>')
+      },
+      showResults () {
+        var filteredResults = this.resultData.detections
+        var allSelect = this.detectorLabels.every( s => { return s.detect } )
+        var selectedLabels = this.detectorLabels
+            .filter( l => { return l.detect })
+            .map( l => { return l.name })
+        filteredResults.forEach( (d, i) => {
+          filteredResults[i].resultIndex = i
+          filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
+          filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
+        })
+          return filteredResults
       }
     },
     methods: {
-      chipColor (confVal) {
-        if (confVal >= 90) return 'green'
-        if (confVal >= 70) return 'lime'
-        return 'yellow'
+      chipGradient (confVal) {
+        return `--chip-media-background: hsl(${confVal / 100 * 120}deg 100% 50%)`
       },
       setData () {
         var self = this
@@ -298,6 +322,7 @@
             self.resultData = JSON.parse(xhr.response)
           }
           
+          /*
           var detectStructures = {}
           if (this.detectorLabels.every( s => { return s.detect } )) {
             detectStructures['*'] = this.detectorLevel
@@ -311,6 +336,14 @@
             "detect": detectStructures,
             "data": this.reader.result.split(',')[1]
           }
+          */
+          var doodsData = {
+            "detector_name": this.detectorName,
+            "detect": {
+              "*": 1
+            },
+            "data": this.reader.result.split(',')[1]
+          }
 
           xhr.send(JSON.stringify(doodsData))
         } else {
@@ -329,14 +362,14 @@
         var loadResult = this.$refs.image_chooser.click()
       },
       selectChip ( iChip ) {
-        var imgWidth
-        var imgHeight
-
         if (this.selectedChip == iChip) {
           this.resetView()
           return
         }
 
+        var imgWidth
+        var imgHeight
+
         this.selectedChip = iChip
         const box = this.$refs.structure_box
         const img = this.$refs.image_src