UI: New rule metrics layout

frontend/components/commons/results/ResultsList.vue

@@ -19,12 +19,6 @@
   <div class="content">
     <slot name="header" />
     <div class="results-scroll" id="scroll">
-      <div
-        :style="{ paddingTop: `${dataset.viewSettings.headerHeight + 10}px` }"
-        v-if="showLoader"
-      >
-        <results-loading :size="dataset.viewSettings.pagination.size" />
-      </div>
       <DynamicScroller
         page-mode
         class="scroller"
@@ -41,10 +35,14 @@
             :icon="emptySearchInfo.icon"
             v-if="dataset.results.total === 0"
           />
+          <results-loading
+            v-if="showLoader"
+            :size="dataset.viewSettings.pagination.size"
+          />
         </template>
         <template v-slot="{ item, index, active }">
           <DynamicScrollerItem
-            v-show="dataset.results.total > 0"
+            v-show="!showLoader && dataset.results.total > 0"
             :watch-data="true"
             class="content__li"
             :item="item"
@@ -210,21 +208,23 @@ export default {
     height: 100vh !important;
     overflow: auto;
     padding-left: 4em;
-    padding-bottom: 61px;
     transition: padding 0s ease-in-out 0.1s;
     &::-webkit-scrollbar {
       display: none;
     }
-    .fixed-header & {
-      padding-bottom: 200px;
-    }
   }
   &__li {
     padding-bottom: 10px;
     position: relative;
     min-height: 140px;
   }
 }
+.scroller {
+  padding-bottom: 61px;
+  .fixed-header & {
+    padding-bottom: 200px;
+  }
+}
 </style>
 <style lang="scss">
 $maxItemsperPage: 20;

frontend/components/core/ReButton.vue

@@ -228,7 +228,7 @@ export default {
   border: 1px solid palette(grey, smooth);
   box-shadow: inset 0 -2px 6px 0 rgba(223, 223, 223, 0.5);
   .svg-icon {
-    margin-right: 1em;
+    margin: auto 1em auto auto;
     vertical-align: middle;
     fill: palette(grey, dark);
   }

frontend/components/text-classifier/labeling-rules/RuleDefinition.vue

@@ -6,20 +6,35 @@
           :current-rule="currentRule"
           :dataset="dataset"
           @update-rule="updateRule"
-        />
+          @update-label="updateLabel"
+        >
+          <template v-if="recordsMetric" #records-metric>
+            Records
+            <strong
+              >{{ recordsMetric.value | formatNumber }}/{{
+                dataset.globalResults.total | formatNumber
+              }}</strong
+            >
+          </template>
+        </rule-labels-definition>
       </div>
-      <div class="rule__global-metrics">
-        <p class="global-metrics__title">Overall Metrics</p>
-        <rules-overall-metrics
+      <div class="rule__metrics">
+        <rules-metrics
+          @records-metric="onUpdateRecordsMetric"
+          title="Rule Metrics"
+          metrics-type="all"
+          :activeLabel="activeLabel"
           :key="refresh"
-          :rules="rules"
           :dataset="dataset"
-        />
-        <re-button
-          class="rule__button button-quaternary--outline"
-          @click="showRulesList"
-          >Manage rules</re-button
         >
+          <template #button-bottom>
+            <re-button
+              class="rule__button button-quaternary--outline"
+              @click="showRulesList"
+              >Manage rules</re-button
+            >
+          </template>
+        </rules-metrics>
       </div>
     </div>
     <p class="rule__records" v-if="dataset.results.total > 0">
@@ -38,13 +53,13 @@ export default {
   },
   data: () => {
     return {
-      rules: [],
+      selectedLabels: undefined,
       currentRule: undefined,
+      recordsMetric: undefined,
       refresh: 0,
     };
   },
   async fetch() {
-    this.rules = await this.getRules({ dataset: this.dataset });
     this.currentRule = await this.getRule({
       dataset: this.dataset,
       query: this.query,
@@ -54,10 +69,18 @@ export default {
     query() {
       return this.dataset.query.text;
     },
+    activeLabel() {
+      return this.selectedLabels
+        ? this.selectedLabels[0]
+        : this.currentRule
+        ? this.currentRule.label
+        : undefined;
+    },
   },
   watch: {
     async query(n, o) {
       if (o !== n) {
+        this.refresh++;
         await this.$fetch();
       }
     },
@@ -72,12 +95,16 @@ export default {
       await this.dataset.viewSettings.enableRulesSummary();
     },
     async updateRule() {
-      this.refresh++;
       await this.$fetch();
     },
+    updateLabel(label) {
+      this.selectedLabels = label;
+    },
+    onUpdateRecordsMetric(met) {
+      this.recordsMetric = met;
+    },
     ...mapActions({
       getRule: "entities/text_classification/getRule",
-      getRules: "entities/text_classification/getRules",
     }),
   },
 };
@@ -86,60 +113,18 @@ export default {
 .rule {
   &__area {
     display: flex;
+    margin-bottom: 2em;
   }
   &__container {
     padding: 20px;
     background: rgba($lighter-color, 0.4);
     border: 1px solid $lighter-color;
     width: 100%;
     border-radius: 5px;
-    margin-bottom: 2em;
     &.active {
       box-shadow: 0 1px 4px 0 rgba(185, 185, 185, 0.5);
     }
   }
-  &__global-metrics {
-    width: 290px;
-    min-width: 290px;
-    max-height: 410px;
-    background: $primary-color;
-    margin-left: 1em;
-    color: $lighter-color;
-    border-radius: 5px;
-    margin-bottom: 2em;
-    padding: 20px;
-    display: flex;
-    flex-flow: column;
-    .global-metrics {
-      &__title {
-        padding-bottom: 0;
-        color: $lighter-color;
-        @include font-size(22);
-        font-weight: bold;
-        margin-top: 0;
-      }
-    }
-    &::v-deep {
-      .rules-global__metrics p {
-        width: 49%;
-        margin-right: 0;
-        color: $lighter-color;
-        padding-bottom: 2em;
-        @include font-size(14px);
-        &[data-title] {
-          &:after,
-          &:before {
-            display: none;
-          }
-        }
-        span {
-          color: $lighter-color;
-          @include font-size(20px);
-          margin-top: 0.3em;
-        }
-      }
-    }
-  }
   &__records {
     color: $font-secondary;
   }
@@ -148,6 +133,23 @@ export default {
     align-self: flex-start;
     margin-bottom: 0 !important;
     margin-top: auto;
+    clear: both;
+  }
+  &__metrics {
+    min-width: 350px;
+    @include media(">desktopLarge") {
+      min-width: 33%;
+    }
+    &::v-deep {
+      .rule-metrics__container {
+        flex-wrap: wrap;
+        height: 100%;
+      }
+      .rule-metrics__item {
+        width: 49%;
+        display: inline-block;
+      }
+    }
   }
 }
 </style>