feat(#961): Rules metrics in sidebar

frontend/components/commons/header/filters/FiltersArea.vue

@@ -122,16 +122,10 @@ export default {
   padding-bottom: 0;
   margin-left: 0;
   padding-right: calc(4em + 45px);
-  &--intro {
-    padding-top: 2em;
-    margin-bottom: 1.5em;
-    &:after {
-      border-bottom: 1px solid $line-light-color;
-      content: "";
-      margin-bottom: 1.5em;
-      position: absolute;
-      left: 0;
-      right: 0;
+  .--metrics & {
+    @include media(">desktop") {
+      padding-right: calc(294px + 100px);
+      transition: padding 0.1s ease-in-out;
     }
   }
 }

frontend/components/commons/sidebar/SidebarButton.vue

@@ -7,7 +7,7 @@
   >
     <svgicon
       v-if="type !== 'Refresh'"
-      v-show="activeView === id"
+      v-show="activeView.includes(id)"
       class="sidebar-button__icon-help"
       :name="type === 'Mode' ? 'check3' : 'double-chev'"
     ></svgicon>
@@ -27,8 +27,8 @@ import "assets/icons/check3";
 export default {
   props: {
     activeView: {
-      type: String,
-      default: undefined,
+      type: Array,
+      default: () => [],
     },
     tooltip: {
       type: String,

frontend/components/commons/sidebar/SidebarMenu.vue

@@ -17,18 +17,20 @@
 
 <template>
   <div class="sidebar">
-    <span v-for="group in sidebarButtonGroups" :key="group.name">
+    <span v-for="group in sidebarGroups" :key="group">
       <div class="sidebar__info">
-        <p>{{ group.name }}</p>
+        <p>{{ group }}</p>
         <sidebar-button
-          v-for="button in group.elements"
+          v-for="button in filteredSidebarItems.filter(
+            (button) => button.group === group
+          )"
           :id="button.id"
           :key="button.id"
-          :active-view="group.isActive"
+          :active-view="[viewMode, currentMetric]"
           :icon="button.icon"
           :tooltip="button.tooltip"
-          :type="group.name"
-          @button-action="group.action"
+          :type="group"
+          @button-action="action(button.action, button.id)"
         />
       </div>
     </span>
@@ -44,78 +46,29 @@ export default {
       requried: false,
       default: undefined,
     },
-  },
-  data: () => {
-    return {
-      currentViewMode: "explore",
-      width: window.innerWidth,
-      visibleSidebarInfo: undefined,
-    };
+    sidebarItems: {
+      type: Array,
+    },
+    currentMetric: {
+      type: String,
+    },
   },
   computed: {
-    sidebarButtonGroups() {
-      // TODO: sidebar must be customized for task view
-      var groups = [];
-      if (this.isDatasetView) {
-        const modeGroup = {
-          name: "Mode",
-          action: this.onChangeViewMode,
-          isActive: this.currentViewMode,
-          elements: [
-            {
-              id: "explore",
-              tooltip: "Explore",
-              icon: "explore-view",
-            },
-            {
-              id: "annotate",
-              tooltip: "Annotate",
-              icon: "annotate-view",
-            },
-          ],
-        };
-
-        if (this.showLabellingRules) {
-          modeGroup.elements.push({
-            id: "labelling-rules",
-            tooltip: "Define rules",
-            icon: "labelling-rules-view",
-          });
-        }
-        groups.push(modeGroup);
-
-        const metrics = {
-          name: "Metrics",
-          condition: this.isDatasetView,
-          action: this.onShowMetric,
-          isActive: this.visibleSidebarInfo,
-          elements: [
-            {
-              id: "progress",
-              tooltip: "Progress",
-              icon: "progress",
-            },
-            {
-              id: "stats",
-              tooltip: "Stats",
-              icon: "metrics",
-            },
-          ],
-        };
-        groups.push(metrics);
-      }
-      const refresh = {
-        name: "Refresh",
-        action: this.onRefresh,
-        elements: [
-          {
-            id: "refresh",
-            tooltip: "Refresh",
-            icon: "refresh",
-          },
-        ],
-      };
-      groups.push(refresh);
+    filteredSidebarItems() {
+      return this.sidebarItems.filter(
+        (item) =>
+          item.group !== "Metrics" || this.metricsByViewMode.includes(item.id)
+      );
+    },
+    metricsByViewMode() {
+      return this.sidebarItems.find(
+        (item) => item.id === this.dataset.viewSettings.viewMode
+      ).relatedMetrics;
+    },
+    sidebarGroups() {
+      const groups = [
+        ...new Set(this.sidebarItems.map((button) => button.group)),
+      ];
       return groups;
     },
     viewMode() {
@@ -127,37 +80,10 @@ export default {
     isDatasetView() {
       return this.dataset !== undefined;
     },
-    showLabellingRules() {
-      return this.isDatasetView && this.dataset.task === "TextClassification";
-    },
-  },
-  watch: {
-    viewMode(newValue) {
-      this.currentViewMode = newValue;
-    },
-  },
-  updated() {
-    window.onresize = () => {
-      this.width = window.innerWidth;
-    };
-  },
-  mounted() {
-    this.currentViewMode = this.viewMode;
   },
   methods: {
-    onShowMetric(info) {
-      this.$emit("showMetric", info);
-      if (this.visibleSidebarInfo !== info) {
-        this.visibleSidebarInfo = info;
-      } else {
-        this.visibleSidebarInfo = undefined;
-      }
-    },
-    onChangeViewMode(id) {
-      this.$emit("changeViewMode", id);
-    },
-    onRefresh() {
-      this.$emit("refresh");
+    action(action, id) {
+      this.$emit(action, id);
     },
   },
 };
@@ -176,7 +102,7 @@ $color: #333346;
   min-height: 100vh;
   min-width: 90px;
   border-left: 1px solid palette(grey, smooth);
-  z-index: 2;
+  z-index: 1;
   p {
     text-align: center;
     font-weight: 600;
@@ -187,6 +113,7 @@ $color: #333346;
     position: relative;
     display: block;
     outline: none;
+    z-index: 3;
   }
   &__info {
     position: relative;

frontend/components/commons/sidebar/SidebarPanel.vue

@@ -16,12 +16,14 @@
   -->
 
 <template>
-  <aside
-    :style="{ top: topPosition }"
-    :class="['sidebar', annotationEnabled ? 'annotation' : 'explore']"
-  >
+  <aside :class="['sidebar', annotationEnabled ? 'annotation' : 'explore']">
     <div class="sidebar__wrapper">
       <div class="sidebar__content">
+        <svgicon
+          @click="closePanel"
+          class="sidebar__panel__button"
+          name="double-chev"
+        ></svgicon>
         <slot></slot>
       </div>
     </div>
@@ -39,37 +41,49 @@ export default {
     annotationEnabled() {
       return this.dataset.viewSettings.viewMode === "annotate";
     },
-    topPosition() {
-      return this.annotationEnabled
-        ? `${this.dataset.viewSettings.headerHeight - 63}px`
-        : `${this.dataset.viewSettings.headerHeight}px`;
+  },
+  methods: {
+    closePanel() {
+      this.$emit("close-panel");
     },
   },
 };
 </script>
 <style lang="scss" scoped>
+$topbarHeight: 55px;
+$paginationHeight: 63px;
+$sidebarMenuWidth: 90px;
 .sidebar {
-  top: 0;
-  min-height: 300px;
-  border-radius: $border-radius;
+  top: $topbarHeight;
+  min-height: calc(100vh - $topbarHeight);
   width: 280px;
   position: absolute;
-  right: 100px;
+  right: $sidebarMenuWidth;
   background: white;
   padding: 1em 1.5em;
-  overflow: auto;
   transition: top 0.2s ease-in-out;
   border: 1px solid palette(grey, smooth);
   box-shadow: 0 1px 9px 0 palette(grey, smooth);
-  border-radius: 3px;
-  z-index: 1;
+  .--paginated & {
+    min-height: calc(100vh - $topbarHeight - $paginationHeight);
+  }
   @include media(">desktop") {
     border-radius: 1px;
     border: none;
     box-shadow: none;
     margin-left: 1em;
     display: block !important;
-    right: 100px;
+    right: $sidebarMenuWidth;
+  }
+  &__panel {
+    &__button {
+      position: absolute;
+      right: 2em;
+      top: 2em;
+      pointer-events: all;
+      cursor: pointer;
+      z-index: 99;
+    }
   }
   &__content {
     border-radius: 2px;

frontend/components/commons/sidebar/SidebarProgress.vue

@@ -135,7 +135,7 @@ label {
   }
 }
 .scroll {
-  max-height: calc(100vh - 480px);
+  max-height: calc(100vh - 350px);
   padding-right: 1em;
   margin-right: -1em;
   overflow: auto;