fix(#1248): allow multiple label attributions in UI (#1424)

(cherry picked from commit bd39624)

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

@@ -29,26 +29,24 @@
       <div class="help__panel__button" @click="showHelpPanel = false">
         Close
       </div>
-      <p class="help__panel__title">What do highlight colours mean?</p>
-      <p>
-        We use model interpretability methods such as Integrated Gradients to
-        compute the attribution of tokens to the model prediction with the goal
-        of providing hints about the model interpretation of data.
+      <p class="help__panel__title">
+        This dataset contains token attributions. What do highlight colors mean?
       </p>
       <p>
-        Model predictions can be correct or incorrect, as indicated by the green
-        or red labels assigned to the predictions together with their score.
-        Given this attributions work as follows:
+        Rubrix enables you to register token attributions as part of the dataset
+        records. For getting token attributions, you can use methods such as
+        Integrated Gradients or SHAP. These methods try to provide a mechanism
+        to interpret model predictions.
       </p>
+      <p>The attributions work as follows:</p>
       <p>
-        [0,+1] <strong>Positive attributions</strong> will have the same colour
-        as the label assigned to the prediction (red for wrong, green for
-        correct). Tokens with positive attributions have the most impacto on the
-        model predicting a specific label.
+        [0,1] <strong>Positive attributions</strong> (in blue) reflect those
+        tokens that are making the model predict the specific predicted label.
       </p>
       <p>
-        [1-, 0] <strong>Negative attributions</strong> will always be blue and
-        highlight those tokens that diverge the model from its final prediction.
+        [-1, 0] <strong>Negative attributions</strong> (in red) reflect those
+        tokens that can influence the model to predict a label other than the
+        specific predicted label.
       </p>
     </div>
   </div>

frontend/components/text-classifier/results/RecordExplain.vue

@@ -45,10 +45,18 @@ export default {
     predicted() {
       return this.record.predicted;
     },
+    prediction() {
+      const predictedLabel =
+        this.record.prediction &&
+        this.record.prediction.labels.reduce((max, obj) =>
+          max.score > obj.score ? max : obj
+        );
+      return predictedLabel.class;
+    },
     explainFormatted() {
       // TODO ALLOW FOR MULTI LABEL
       return this.explain.map((token) => {
-        const grad = Number(Object.values(token.attributions)).toFixed(3);
+        const grad = Number(token.attributions[this.prediction]).toFixed(3);
         let percent = Math.round(Math.abs(grad) * 100);
         if (percent !== 0) {
           /* eslint-disable no-mixed-operators */
@@ -68,19 +76,9 @@ export default {
   },
   methods: {
     customClass(tokenItem) {
-      if (this.predicted !== undefined) {
-        if (Math.sign(tokenItem.grad) !== 1) {
-          return `grad-neg-${tokenItem.percent}`;
-        } else {
-          return this.predicted === "ko"
-            ? `grad-rest-${tokenItem.percent}`
-            : `grad-plus-${tokenItem.percent}`;
-        }
-      } else {
-        return Math.sign(tokenItem.grad) !== 1
-          ? `grad-rest-${tokenItem.percent}`
-          : `grad-plus-${tokenItem.percent}`;
-      }
+      return Math.sign(tokenItem.grad) !== 1
+        ? `grad-rest-${tokenItem.percent}`
+        : `grad-neg-${tokenItem.percent}`;
     },
   },
 };

frontend/components/text-classifier/results/RecordInputs.vue

@@ -20,7 +20,7 @@
     ref="list"
     :class="showFullRecord ? 'record__expanded' : 'record__collapsed'"
   >
-    <div class="record__content">
+    <div :class="!explanation ? 'record__content' : ''">
       <span v-for="(text, index) in data" :key="index" class="record">
         <span :class="['record__item', isHtml(text) ? 'record--email' : '']">
           <span class="record__key">{{ index }}:</span>
@@ -35,7 +35,7 @@
     </div>
     <a
       href="#"
-      v-if="scrollHeight >= visibleRecordHeight"
+      v-if="scrollHeight >= visibleRecordHeight && !explanation"
       class="record__button"
       @click.prevent="showFullRecord = !showFullRecord"
       >{{ !showFullRecord ? "Show full record" : "Show less" }}