Adjust TalentTable to fit ReportTable's UX

3 files changed, 21 insertions, 19 deletions

diff --git a/src/HeroTalentTable.vue b/src/HeroTalentTable.vue
index 5c3545b..6bd228a 100644
--- a/src/HeroTalentTable.vue
+++ b/src/HeroTalentTable.vue
@@ -6,29 +6,33 @@
 
     <b-table :data="heroReport"
              :mobile-cards="false">
+      <template slot-scope="props" slot="header">
+        <b-tooltip :active="!!props.column.meta" :label="props.column.meta || ''" position="is-bottom" dashed>
+          {{ props.column.label }}
+        </b-tooltip>
+      </template>
+
       <template slot-scope="props">
         <b-table-column field="Talent" label="Talent">
           <talent-image :entry="props.row" :size="48"></talent-image>
         </b-table-column>
 
-        <b-table-column field="Winner" label="Level 1 Win Rate" sortable numeric>
+        <b-table-column field="TalentWinrateBase" label="Level 1 Win Rate" meta="Estimated." sortable numeric>
           <template v-if="isNaN(props.row.TalentWinrateBase)">
-            {{ (100 * props.row.Winner).toFixed(2) }}%
+            {{ (100 * props.row.Winner).toFixed(2) }}% <!-- No Talent -->
           </template>
           <template v-else>
             {{ (100 * props.row.TalentWinrateBase).toFixed(2) }}%
           </template>
+          <small v-if="props.row.SampleTooSmall">uncertain</small>
         </b-table-column>
 
-        <b-table-column field="TalentWinrateScaling" label="Win Rate Advantage" sortable numeric>
-          <template v-if="isNaN(props.row.TalentWinrateScaling) || props.row.SampleTooSmall">
-            <span class="mdi mdi-gauge-empty mdi-18px" title="Not enough data"></span>
-          </template>
-          <template v-else>
-            {{ (props.row.TalentWinrateScaling > 0? '+' : '') + (100 * props.row.TalentWinrateScaling / getLevelBuckets()).toFixed(2) }}% <small>for {{ getLevelsPerBucket(props.row) + (getLevelsPerBucket(props.row) > 1? ' Levels' : ' Level') }}</small>
+        <b-table-column field="TalentWinrateMax" label="Max Level Win Rate" meta="Estimated." sortable numeric>
+          <template v-if="!isNaN(props.row.TalentWinrateMax)">
+            {{ (100 * props.row.TalentWinrateMax).toFixed(2) }}%
+            <small v-if="props.row.SampleTooSmall">uncertain</small>
           </template>
         </b-table-column>
-
       </template>
     </b-table>
   </div>
diff --git a/src/ReportTable.vue b/src/ReportTable.vue
index 8a0d617..5c78277 100644
--- a/src/ReportTable.vue
+++ b/src/ReportTable.vue
@@ -12,9 +12,6 @@
           <b-dropdown-item v-for="rarity in RARITIES" :key="rarity" :value="rarity">{{ rarity }} Talents</b-dropdown-item>
         </b-dropdown>
       </p>
-
-      <b-input placeholder="Search…" type="search" icon="magnify" v-model="filterName"></b-input>
-
     </b-field>
 
     <b-field>
@@ -119,7 +116,6 @@ export default Vue.component('report-table', {
       const giveTrue = (x) => true;
       const filters = [
         this.filterRarity != ''? (entry) => maps.getTalentRarity(entry.Talent) == this.filterRarity : giveTrue,
-        this.filterName   != ''? (entry) => maps.getHero(entry.Actor).includes(this.filterName) || maps.getTalentName(entry.Talent).includes(this.filterName) : giveTrue,
         !this.filterLowPickrate? (entry) => !entry.SampleTooSmall : giveTrue,
       ];
       const and = (a, b) => a && b;
@@ -129,12 +125,6 @@ export default Vue.component('report-table', {
     totalPicks: function() {
       return ReportService.getTotalPicks(this.selectedMode);
     },
-    playersPerMatch: function() {
-      return maps.playersPerMatch(this.selectedMode);
-    },
-    hasTalents: function() {
-      return maps.hasTalents(this.selectedMode);
-    },
   },
   components: {
     HeroImage,
diff --git a/src/RouterParamMixin.js b/src/RouterParamMixin.js
index 0c5dbc3..cf42920 100644
--- a/src/RouterParamMixin.js
+++ b/src/RouterParamMixin.js
@@ -1,5 +1,13 @@
+import * as maps from './maps/maps';
+
 export default {
   computed: {
+    playersPerMatch: function() {
+      return maps.playersPerMatch(this.selectedMode);
+    },
+    hasTalents: function() {
+      return maps.hasTalents(this.selectedMode);
+    },
     selectedActor: {
       get: function() {
         return this.$route.query.actor || '*Kinetic*';