fix: Reposition help info button

frontend/assets/scss/abstract/variables/_variables.scss

@@ -157,6 +157,9 @@ $swift-linear-duration: 0.15s !default;
 $swift-linear-timing-function: linear !default;
 $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
 
+// topbar
+$topbarHeight: 56px;
+
 // sidebar
 $sidebarPanelWidth: 280px;
 $sidebarMenuWidth: 70px;

frontend/components/base/BaseTopbarBrand.vue

@@ -33,7 +33,7 @@ export default {
   width: 100%;
   display: flex;
   align-items: center;
-  min-height: 56px;
+  min-height: $topbarHeight;
   position: relative;
   background: palette(grey, 100);
   color: palette(white);

frontend/components/commons/sidebar/SidebarButton.vue

@@ -1,9 +1,9 @@
 <template>
   <a
     class="sidebar-button"
-    :class="[type.toLowerCase(), activeView.includes(id) ? 'active' : '']"
+    :class="sidebarButtonClass"
     href="#"
-    :data-title="!activeView.includes(id) ? tooltip : null"
+    :data-title="sidebarButtonTooltipText"
     @click="$emit('button-action', id)"
   >
     <svgicon :name="icon"></svgicon>
@@ -24,8 +24,7 @@ export default {
       default: () => [],
     },
     tooltip: {
-      type: String,
-      required: true,
+      type: [String, null],
     },
     id: {
       type: String,
@@ -36,13 +35,23 @@ export default {
       required: true,
     },
     type: {
-      type: String,
-      required: true,
+      type: [String, null],
       validator: (value) => {
-        return ["Mode", "Metrics", "Refresh"].includes(value);
+        return ["Mode", "Metrics", "Refresh", "View-info", null].includes(value);
       },
     },
   },
+  computed: {
+    sidebarButtonClass() {
+      return [
+        this.type?.toLowerCase(),
+        this.activeView.includes(this.id) ? "active" : "",
+      ];
+    },
+    sidebarButtonTooltipText() {
+      return !this.activeView.includes(this.id) ? this.tooltip : null;
+    },
+  },
 };
 </script>
 

frontend/components/commons/sidebar/SidebarMenu.vue

@@ -17,23 +17,25 @@
 
 <template>
   <div class="sidebar">
-    <span v-for="group in sidebarGroups" :key="group">
-      <div class="sidebar__info">
-        <p>{{ group }}</p>
-        <sidebar-button
-          v-for="button in filteredSidebarItems.filter(
-            (button) => button.group === group
-          )"
-          :id="button.id"
-          :key="button.id"
-          :active-view="[viewMode, currentMetric]"
-          :icon="button.icon"
-          :tooltip="button.tooltip"
-          :type="group"
-          @button-action="action(button.action, button.id)"
-        />
-      </div>
-    </span>
+    <div
+      v-for="group in sidebarGroups"
+      :key="group"
+      :class="`sidebar__info --${!group ? 'ungruped' : 'group'}`"
+    >
+      <p>{{ group }}</p>
+      <sidebar-button
+        v-for="button in filteredSidebarItems.filter(
+          (button) => button.group === group
+        )"
+        :id="button.id"
+        :key="button.id"
+        :active-view="[viewMode, currentMetric]"
+        :icon="button.icon"
+        :tooltip="button.tooltip"
+        :type="group"
+        @button-action="action(button.action, button.id)"
+      />
+    </div>
     <slot />
   </div>
 </template>
@@ -95,12 +97,14 @@ $sidebar-button-size: 45px;
   top: 0;
   width: $sidebar-button-size;
   min-width: $sidebar-button-size;
-  min-height: 100vh;
+  min-height: calc(100vh - $topbarHeight);
   min-width: $sidebarMenuWidth;
   background: palette(grey, 700);
   box-shadow: none;
   pointer-events: all;
   transition: box-shadow 0.2s ease-in-out 0.4s;
+  display: flex;
+  flex-direction: column;
   .--metrics & {
     box-shadow: inset 1px 1px 5px -2px #c7c7c7;
     transition: box-shadow 0.2s ease-in-out;
@@ -118,7 +122,11 @@ $sidebar-button-size: 45px;
   }
   &__info {
     position: relative;
-    margin-bottom: 2em;
+    margin-bottom: 1em;
+    &.--ungruped {
+      margin-top: auto;
+      margin-bottom: 0em;
+    }
   }
 }
 a[data-title]:not(.active) {

frontend/components/commons/sidebar/TaskSidebar.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="sidebar__container" v-if="dataset">
+    <component :is="currentTaskHelp" :dataset="dataset" />
     <sidebar-panel
       :class="[currentTask, currentMetric ? 'visible' : '']"
       :dataset="dataset"
@@ -52,6 +53,9 @@ export default {
     currentTask() {
       return this.dataset.task;
     },
+    currentTaskHelp() {
+      return this.currentTask + "ViewInfo";
+    },
     metricsByViewMode() {
       return this.sidebarItems.find(
         (item) => item.id === this.dataset.viewSettings.viewMode

frontend/components/text-classifier/header/TextClassificationHeader.vue

@@ -23,7 +23,6 @@
     >
       <records-counter :total="dataset.results.total"></records-counter>
     </filters-area>
-    <explain-help-info v-if="isExplainedRecord" :dataset="dataset" />
     <global-actions :dataset="dataset">
       <validate-discard-action
         :dataset="dataset"
@@ -53,9 +52,6 @@ export default {
     },
   },
   computed: {
-    isExplainedRecord() {
-      return this.dataset.results.records.some((record) => record.explanation);
-    },
     isMultiLabel() {
       return this.dataset.isMultiLabel;
     },

frontend/components/text-classifier/sidebar/TextClassificationSidebar.vue

@@ -19,9 +19,10 @@
   <sidebar-menu
     :current-metric="currentMetric"
     :dataset="dataset"
-    :sidebar-items="sidebarItems"
+    :sidebar-items="filteredSidebarItems"
     @refresh="$emit('refresh')"
     @show-metrics="onShowMetrics"
+    @show-view-info="onShowViewInfo"
     @change-view-mode="onChangeViewMode"
   />
 </template>
@@ -92,16 +93,36 @@ export default {
           group: "Refresh",
           action: "refresh",
         },
+        {
+          id: "view-info",
+          tooltip: null,
+          icon: "info",
+          group: null,
+          action: "show-view-info",
+        },
       ],
     };
   },
+  computed: {
+    recordHasExplanation() {
+      return this.dataset.results.records.some((record) => record.explanation);
+    },
+    filteredSidebarItems() {
+      return this.recordHasExplanation
+        ? this.sidebarItems
+        : this.sidebarItems.filter((i) => i.id !== "view-info");
+    },
+  },
   methods: {
     onChangeViewMode(value) {
       this.$emit("change-view-mode", value);
     },
     onShowMetrics(info) {
       this.$emit("show-metrics", info);
     },
+    async onShowViewInfo() {
+      await this.dataset.viewSettings.openViewInfo(true);
+    },
   },
 };
 </script>

frontend/components/text-classifier/header/ExplainHelpInfo.vue → frontend/components/text-classifier/sidebar/TextClassificationViewInfo.vue

@@ -17,22 +17,15 @@
 
 <template>
   <div class="help">
-    <base-button
-      class="help__button secondary light small"
-      @click="showHelpPanel = true"
-    >
-      <svgicon name="support" width="22" height="22"></svgicon>
-      Help
-    </base-button>
     <lazy-base-modal
       modal-class="modal-secondary"
       modal-position="modal-center"
       :modal-custom="true"
       :prevent-body-scroll="true"
-      :modal-visible="showHelpPanel"
+      :modal-visible="visibleViewInfo === true"
       @close-modal="closeModal"
     >
-      <div v-if="showHelpPanel" class="help__panel">
+      <div class="help__panel">
         <p class="help__panel__title">
           This dataset contains token attributions. What do highlight colors
           mean?
@@ -62,12 +55,20 @@
 <script>
 import "assets/icons/support";
 export default {
-  data: () => ({
-    showHelpPanel: false,
-  }),
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    visibleViewInfo() {
+      return this.dataset?.viewSettings.visibleViewInfo;
+    },
+  },
   methods: {
-    closeModal() {
-      this.showHelpPanel = false;
+    async closeModal() {
+      await this.dataset.viewSettings.openViewInfo(false);
     },
   },
 };
@@ -85,10 +86,6 @@ export default {
     border-radius: 1px;
     position: relative;
     margin-bottom: $base-space * 4;
-    .atom {
-      @include font-size(16px);
-      display: inline-block;
-    }
     &__title {
       @include font-size(16px);
       color: $black-54;
@@ -103,31 +100,6 @@ export default {
       padding-left: 1.5em;
       margin-bottom: 1.5em;
     }
-    &__button {
-      position: absolute;
-      right: 1em;
-      top: 1em;
-      cursor: pointer;
-      &:after {
-        content: "\2715";
-        font-weight: bold;
-        color: palette(brown);
-        font-size: 14px;
-      }
-    }
-  }
-  &__button {
-    display: flex;
-    margin-right: 0;
-    margin-left: auto;
-    background: palette(grey, 700) !important;
-    &:hover {
-      background: darken(palette(grey, 700), 2%) !important;
-    }
-    .svg-icon {
-      margin-right: 0.3em;
-      fill: $black-54;
-    }
   }
 }
 </style>

frontend/models/DatasetViewSettings.js

@@ -52,9 +52,19 @@ export default class DatasetViewSettings extends Model {
       headerHeight: this.number(140),
       visibleMetrics: this.boolean(false),
       visibleRulesList: this.boolean(false),
+      visibleViewInfo: this.boolean(false),
     };
   }
 
+  async openViewInfo(value) {
+    return await DatasetViewSettings.update({
+      where: this.$id,
+      data: {
+        visibleViewInfo: value,
+      },
+    });
+  }
+
   async enableRulesSummary() {
     return await DatasetViewSettings.update({
       where: this.$id,

frontend/specs/components/commons/__snapshots__/TaskSidebar.spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`TaskSidebar Show sidebar panel 1`] = `
 <div class="sidebar__container">
+  <textclassificationviewinfo dataset="[object Object]"></textclassificationviewinfo>
   <aside class="sidebar TextClassification">
     <div class="sidebar__wrapper">
       <div class="sidebar__content"><a href="#" class="sidebar__close-button"><svg version="1.1" viewBox="0 0 41 40" class="svg-icon svg-fill" style="width: 12px; height: 12px;">
@@ -19,6 +20,7 @@ exports[`TaskSidebar Show sidebar panel 1`] = `
 
 exports[`TaskSidebar renders properly 1`] = `
 <div class="sidebar__container">
+  <textclassificationviewinfo dataset="[object Object]"></textclassificationviewinfo>
   <aside class="sidebar TextClassification">
     <div class="sidebar__wrapper">
       <div class="sidebar__content"><a href="#" class="sidebar__close-button"><svg version="1.1" viewBox="0 0 41 40" class="svg-icon svg-fill" style="width: 12px; height: 12px;">

frontend/specs/components/text-classification/sidebar/RecordTextClassificationViewInfo.spec.js

@@ -0,0 +1,34 @@
+import { mount } from "@vue/test-utils";
+import ComponentTextClassifierViewInfo from "@/components/text-classifier/sidebar/TextClassificationViewInfo";
+import { DatasetViewSettings } from "@/models/DatasetViewSettings";
+
+const props = {
+  dataset: {
+    task: "TextClassification",
+    viewSettings: new DatasetViewSettings({
+      visibleViewInfo: true,
+    }),
+  },
+};
+
+let wrapper = null;
+beforeEach(() => {
+  wrapper = mount(ComponentTextClassifierViewInfo, {
+    propsData: props,
+  });
+});
+afterEach(() => {
+  wrapper.destroy();
+});
+describe("TextClassificationViewInfo", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("Required property", () => {
+    expect(ComponentTextClassifierViewInfo.props.dataset.required).toBe(true);
+  });
+
+  test("renders properly", () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});