From 7794de19982e4f63fd47dea272d1201ef288cc6c Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Fri, 30 Jun 2023 14:42:53 +0200
Subject: [PATCH 01/10] Convert ResultPopover to Composition API + setup

---
 frontend/src/components/ResultPopover.vue | 275 ++++++++++------------
 1 file changed, 127 insertions(+), 148 deletions(-)

diff --git a/frontend/src/components/ResultPopover.vue b/frontend/src/components/ResultPopover.vue
index c3f573b7c9..5bb5fe3c73 100644
--- a/frontend/src/components/ResultPopover.vue
+++ b/frontend/src/components/ResultPopover.vue
@@ -11,155 +11,136 @@
                 <v-card-text>
                     <v-row class="text-center">
                         <v-col cols="6" class="pt-0">
-                            <div > Prediction </div>
+                            <div> Prediction </div>
 
                             <v-tooltip bottom>
                                 <template v-slot:activator="{ on, attrs }">
-                                    <div v-on="prediction.length > maxLengthDisplayedCategory ? on : ''" :class="classColorPrediction" class="text-h6">  {{ abbreviateMiddle(prediction, maxLengthDisplayedCategory) }}</div>
+                                    <div v-on="prediction.length > maxLengthDisplayedCategoryCard ? on : ''" :class="classColorPrediction" class="text-h6"> {{ abbreviateMiddle(prediction, maxLengthDisplayedCategoryCard) }}</div>
                                 </template>
-                                <span>{{prediction}}</span>
+                                <span>{{ prediction }}</span>
                             </v-tooltip>
 
                         </v-col>
                         <v-col cols="6" class="pt-0 pb-5">
-                            <div > Actual </div>
+                            <div> Actual </div>
 
                             <v-tooltip bottom>
                                 <template v-slot:activator="{ on, attrs }">
                                     <div class="text-h6">
                                         <div v-if="isDefined(actual)">
-                                            <div v-on="actual.length > maxLengthDisplayedCategory ? on : ''"> {{ abbreviateMiddle(actual,  maxLengthDisplayedCategory) }}</div>
-                                        </div> 
+                                            <div v-on="actual.length > maxLengthDisplayedCategoryCard ? on : ''"> {{ abbreviateMiddle(actual, maxLengthDisplayedCategoryCard) }}</div>
+                                        </div>
                                         <div v-else> - </div>
                                     </div>
                                 </template>
-                                <span class="predict"> {{actual}}</span>
+                                <span class="predict"> {{ actual }}</span>
                             </v-tooltip>
 
                         </v-col>
                     </v-row>
                     <v-row align="center">
                         <v-col cols="4">
-                            <v-text-field
-                                dense
-                                solo
-                                hide-details
-                                clearable
-                                class="mx-2 mb-2 flex-1"
-                                v-model="search"
-                                append-icon="mdi-magnify"
-                                label="Search"
-                            ></v-text-field>
+                            <v-text-field dense solo hide-details clearable class="mx-2 mb-2 flex-1" v-model="search" append-icon="mdi-magnify" label="Search"></v-text-field>
                         </v-col>
                         <span>
                             ({{ numberDisplayed }} of {{ totalCategories }})
                         </span>
                     </v-row>
-                    <v-chart class="chart pr-5" :option="chartOptions" :init-options="chartInit" autoresize/>
+                    <v-chart class="chart pr-5" :option="chartOptions" :init-options="chartInit" autoresize />
                 </v-card-text>
                 <v-card-actions class="justify-end">
-                    <v-btn
-                    text
-                    @click="dialog.value = false"
-                    >Close</v-btn>
+                    <v-btn text @click="dialog.value = false">Close</v-btn>
                 </v-card-actions>
             </v-card>
         </template>
     </v-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import * as _ from "lodash";
-import {Component, Prop, Vue} from 'vue-property-decorator';
-import {use} from "echarts/core";
-import ECharts from "vue-echarts";
-import {SVGRenderer} from "echarts/renderers";
-import {BarChart} from "echarts/charts";
-import {DataZoomSliderComponent, DataZoomInsideComponent, GridComponent} from "echarts/components"
-import {abbreviateMiddle, maxLengthDisplayedCategory} from "@/results-utils";
+import { ref, onMounted, computed } from "vue";
+import { use } from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+import { BarChart } from "echarts/charts";
+import { DataZoomSliderComponent, DataZoomInsideComponent, GridComponent } from "echarts/components"
+import { abbreviateMiddle, maxLengthDisplayedCategory } from "@/results-utils";
 
 use([SVGRenderer, BarChart, GridComponent, DataZoomSliderComponent, DataZoomInsideComponent]);
-Vue.component("v-chart", ECharts);
-
-@Component
-export default class ResultPopover extends Vue {
-    @Prop({required: true}) resultProbabilities!: {[key: string]: number};
-    @Prop({required: true}) prediction!: string;
-    @Prop({required: true}) actual!: string;
-    @Prop({required: true}) classColorPrediction!: string;
-
-    search: string = "";
-    showSlider : boolean = true;
-    numberDisplayed : number = 0;
-    sizeResultCard? = 0;
-
-    abbreviateMiddle = abbreviateMiddle;
-
-    async mounted(){
-        this.sizeResultCard = 9 * window.innerWidth / 10;
-        window.addEventListener('resize', () => {
-            this.sizeResultCard = 9 * window.innerWidth / 10;
-        })
-    }
 
-    get totalCategories(){
-        return Object.keys(this.resultProbabilities).length;
-    }
 
-    get maxLengthDisplayedCategory(){
-        return maxLengthDisplayedCategory(this.sizeResultCard);
-    }
+interface Props {
+    resultProbabilities: { [key: string]: number };
+    prediction: string;
+    actual: string;
+    classColorPrediction: string;
+}
 
-    isDefined(val: any) {
-        return !_.isNil(val);
-    }
+const props = defineProps<Props>();
+
+const search = ref("");
+const showSlider = ref(true);
+const numberDisplayed = ref(0);
+const sizeResultCard = ref(0);
+
+onMounted(() => {
+    sizeResultCard.value = 9 * window.innerWidth / 10;
+    window.addEventListener('resize', () => {
+        sizeResultCard.value = 9 * window.innerWidth / 10;
+    })
+});
 
-    get chartInit(){
-        return {
-            renderer: 'svg'
-        }
+const totalCategories = computed(() => Object.keys(props.resultProbabilities).length);
+
+const maxLengthDisplayedCategoryCard = computed(() => maxLengthDisplayedCategory(sizeResultCard.value));
+
+function isDefined(val: any) {
+    return !_.isNil(val);
+}
+
+function chartInit() {
+    return {
+        renderer: 'svg'
     }
+}
 
-    get chartOptions() {
-        let maxPercentage = Math.max(...Object.values(this.resultProbabilities));
-        const maxShown = maxPercentage + (20 * maxPercentage) / 100;
-        this.showSlider = Object.keys(this.resultProbabilities).length > 20;
-        let max = this.maxLengthDisplayedCategory;
-        let s = this.search;
-        let def = this.isDefined;
-        let results = Object.fromEntries(
-            Object.entries(this.resultProbabilities)
-                .filter(function (element)
-                    { 
-                        let key = element[0];
-                        if (def(s))
-                            return key.toLocaleLowerCase().includes(s.toLocaleLowerCase());
-                        else
-                            return true;
-                    }
-                )
-                .sort((a, b) => b[0].localeCompare(a[0]))
-                .map(function (elt){
-                    elt[0] = abbreviateMiddle(elt[0], max);
-                    return elt;
-                })
-        );
-        this.numberDisplayed = Object.keys(results).length;
-        return {
-            xAxis: {
-                type: "value",
-                min: 0,
-                max: maxShown,
+const chartOptions = computed(() => {
+    let maxPercentage = Math.max(...Object.values(props.resultProbabilities));
+    const maxShown = maxPercentage + (20 * maxPercentage) / 100;
+    showSlider.value = Object.keys(props.resultProbabilities).length > 20;
+    let max = maxLengthDisplayedCategoryCard.value;
+    let s = search.value;
+    let results = Object.fromEntries(
+        Object.entries(props.resultProbabilities)
+            .filter(function (element) {
+                let key = element[0];
+                if (isDefined(s))
+                    return key.toLocaleLowerCase().includes(s.toLocaleLowerCase());
+                else
+                    return true;
+            }
+            )
+            .sort((a, b) => b[0].localeCompare(a[0]))
+            .map(function (elt) {
+                elt[0] = abbreviateMiddle(elt[0], max);
+                return elt;
+            })
+    );
+    numberDisplayed.value = Object.keys(results).length;
+    return {
+        xAxis: {
+            type: "value",
+            min: 0,
+            max: maxShown,
+        },
+        yAxis: {
+            type: "category",
+            data: Object.keys(results),
+            axisLabel: {
+                interval: 0,
             },
-            yAxis: {
-                type: "category",
-                data: Object.keys(results),
-                axisLabel: {
-                    interval: 0,
-                },
-            },
-            series: [
-                {
+        },
+        series: [
+            {
                 type: "bar",
                 label: {
                     show: true,
@@ -170,53 +151,51 @@ export default class ResultPopover extends Vue {
                             : params.value.toFixed(3).toLocaleString(),
                 },
                 data: Object.values(results),
-                },
-            ],
-            grid: {
-                width: "80%",
-                height: "80%",
-                top: "10%",
-                left: "10%",
-                right: "10%",
-                containLabel: true,
             },
-            color: ["#0091EA"],
-            dataZoom: [
-                {
-                    type: 'inside',
-                    yAxisIndex: 0,
-                    minValueSpan: 15,
-                    maxValueSpan: 15,
-                    zoomOnMouseWheel: false,
-                    moveOnMouseWheel: true,
-                    moveOnMouseMove: false,
-                    start:100,
-                },
-                {
-                    show: this.showSlider,
-                    showDetail: false,
-                    maxValueSpan: 15,
-                    brushSelect: false,
-                    yAxisIndex: 0,
-                    right: 10,
-                    width:15,
-                    start:100,
-                },
-            ]
-        };
-  }
+        ],
+        grid: {
+            width: "80%",
+            height: "80%",
+            top: "10%",
+            left: "10%",
+            right: "10%",
+            containLabel: true,
+        },
+        color: ["#0091EA"],
+        dataZoom: [
+            {
+                type: 'inside',
+                yAxisIndex: 0,
+                minValueSpan: 15,
+                maxValueSpan: 15,
+                zoomOnMouseWheel: false,
+                moveOnMouseWheel: true,
+                moveOnMouseMove: false,
+                start: 100,
+            },
+            {
+                show: showSlider.value,
+                showDetail: false,
+                maxValueSpan: 15,
+                brushSelect: false,
+                yAxisIndex: 0,
+                right: 10,
+                width: 15,
+                start: 100,
+            },
+        ]
+    };
+})
 
+</script>
 
+<style scoped>
+.chart {
+    height: 420px;
 }
 
-</script>
-
-<style>
-    .chart{
-        height: 420px;
-    }
-    .v-tooltip__content {
-        max-width: 500px !important;
-        overflow-wrap: anywhere;
-    }
+.v-tooltip__content {
+    max-width: 500px !important;
+    overflow-wrap: anywhere;
+}
 </style>
\ No newline at end of file

From c603182c1b9106b58c8f9ff05db423bee38a61fe Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Tue, 4 Jul 2023 10:18:08 +0200
Subject: [PATCH 02/10] Convert Inspector to Composition API

---
 frontend/src/views/main/project/Inspector.vue | 371 ++++++++----------
 1 file changed, 157 insertions(+), 214 deletions(-)

diff --git a/frontend/src/views/main/project/Inspector.vue b/frontend/src/views/main/project/Inspector.vue
index 19ec59da9d..03340308aa 100644
--- a/frontend/src/views/main/project/Inspector.vue
+++ b/frontend/src/views/main/project/Inspector.vue
@@ -4,16 +4,14 @@
       <v-row v-if='modelFeatures.length'>
         <v-col cols="12" md="6">
           <v-card outlined>
-            <OverlayLoader :show="loadingData"/>
+            <OverlayLoader :show="loadingData" />
             <v-card-title>
               Input Data
               <v-spacer></v-spacer>
               <v-chip v-show="dirty || isInputNotOriginal" small label outlined color="accent" class="mx-1 pa-1">
                 modified
               </v-chip>
-              <v-btn text small @click="resetInput"
-                     v-track-click="'Inspection feature reset'"
-                     :disabled="!(dirty || isInputNotOriginal)">reset
+              <v-btn text small @click="resetInput" v-track-click="'Inspection feature reset'" :disabled="!(dirty || isInputNotOriginal)">reset
               </v-btn>
               <v-menu left bottom offset-y :close-on-content-click="false">
                 <template v-slot:activator="{ on, attrs }">
@@ -22,19 +20,14 @@
                   </v-btn>
                 </template>
                 <v-list dense tile>
-                    <v-list-item>
-                        <v-btn tile small text color="primary"
-                               @click="featuresToView = inputMetaData.map(e => e.name)">All
-                        </v-btn>
-                        <v-btn tile small text color="secondary" @click="featuresToView = []">None</v-btn>
-                    </v-list-item>
-                    <v-list-item v-for="f in inputMetaData" :key="f.name">
-                        <v-checkbox
-                                :label="f.name" :value="f.name"
-                                v-model="featuresToView"
-                                hide-details class="mt-1"
-                        ></v-checkbox>
-                    </v-list-item>
+                  <v-list-item>
+                    <v-btn tile small text color="primary" @click="featuresToView = inputMetaData.map(e => e.name)">All
+                    </v-btn>
+                    <v-btn tile small text color="secondary" @click="featuresToView = []">None</v-btn>
+                  </v-list-item>
+                  <v-list-item v-for="f in inputMetaData" :key="f.name">
+                    <v-checkbox :label="f.name" :value="f.name" v-model="featuresToView" hide-details class="mt-1"></v-checkbox>
+                  </v-list-item>
                 </v-list>
               </v-menu>
 
@@ -42,66 +35,34 @@
             <v-card-text v-if="!errorLoadingMetadata && Object.keys(inputMetaData).length > 0" id="inputTextCard">
               <div class="caption error--text">{{ dataErrorMsg }}</div>
               <v-form lazy-validation>
-                <div v-for="c in datasetNonTargetColumns" :key="c.name"
-                     v-show="featuresToView.includes(c.name)">
-                    <ValidationProvider
-                            :name="c.name"
-                            v-slot="{ dirty }"
-                    >
-                        <div class="py-1 d-flex" v-if="isFeatureEditable(c.name)">
-                            <label class="info--text">{{ c.name }}</label>
-                            <input type="number" v-if="c.type === 'numeric'"
-                                   v-model="inputData[c.name]"
-                                   class="common-style-input"
-                                   :class="{
-                                 'is-transformed': !dirty && transformationModifications.hasOwnProperty(c.name) && inputData[c.name] === transformationModifications[c.name],
-                                 'is-dirty': dirty || inputData[c.name] !== originalData[c.name]
-                             }"
-                                   @change="onValuePerturbation(c)"
-                                   required
-                            />
-                            <textarea v-if="c.type === 'text'"
-                                      v-model="inputData[c.name]"
-                                      :rows="!inputData[c.name] ? 1 : Math.min(15, parseInt(inputData[c.name].length / 40) + 1)"
-                                      class="common-style-input"
-                                      :class="{
-                                 'is-transformed': !dirty && transformationModifications.hasOwnProperty(c.name) && inputData[c.name] === transformationModifications[c.name],
-                                 'is-dirty': dirty || inputData[c.name] !== originalData[c.name]
-                             }"
-                                      @change="onValuePerturbation(c)"
-                                      required
-                            ></textarea>
-                            <select v-if="c.type === 'category'"
-                                    v-model="inputData[c.name]"
-                                    class="common-style-input"
-                                    :class="{
-                                 'is-transformed': !dirty && transformationModifications.hasOwnProperty(c.name) && inputData[c.name] === transformationModifications[c.name],
-                                 'is-dirty': dirty || inputData[c.name] !== originalData[c.name]
-                             }"
-                                    @change="onValuePerturbation(c)"
-                                    required
-                            >
-                                <option v-for="k in c.values" :key="k" :value="k">{{ k }}</option>
-                            </select>
-                            <div class="d-flex flex-column">
-                                <FeedbackPopover
-                                        v-if="!isMiniMode"
-                                        :inputLabel="c.name"
-                                        :inputValue="inputData[c.name]"
-                                        :originalValue="originalData[c.name]"
-                                        :inputType="c.type"
-                                        @submit="$emit(dirty ? 'submitValueVariationFeedback' : 'submitValueFeedback', arguments[0])"
-                                />
-                                <TransformationPopover
-                                        v-if="catalogStore.transformationFunctionsByColumnType.hasOwnProperty(c.type)"
-                                        :column="c.name" :column-type="c.type"/>
-                            </div>
-                        </div>
-                        <div class="py-1 d-flex" v-else>
-                            <label class="info--text">{{ c.name }}</label>
-                            <span>{{ inputData[c.name] }}</span>
-                        </div>
-                    </ValidationProvider>
+                <div v-for="c in datasetNonTargetColumns" :key="c.name" v-show="featuresToView.includes(c.name)">
+                  <ValidationProvider :name="c.name" v-slot="{ dirty }">
+                    <div class="py-1 d-flex" v-if="isFeatureEditable(c.name)">
+                      <label class="info--text">{{ c.name }}</label>
+                      <input type="number" v-if="c.type === 'numeric'" v-model="inputData[c.name]" class="common-style-input" :class="{
+                        'is-transformed': !dirty && transformationModifications.hasOwnProperty(c.name) && inputData[c.name] === transformationModifications[c.name],
+                        'is-dirty': dirty || inputData[c.name] !== originalData[c.name]
+                      }" @change="onValuePerturbation(c)" required />
+                      <textarea v-if="c.type === 'text'" v-model="inputData[c.name]" :rows="!inputData[c.name] ? 1 : Math.min(15, parseInt(inputData[c.name].length / 40) + 1)" class="common-style-input" :class="{
+                        'is-transformed': !dirty && transformationModifications.hasOwnProperty(c.name) && inputData[c.name] === transformationModifications[c.name],
+                        'is-dirty': dirty || inputData[c.name] !== originalData[c.name]
+                      }" @change="onValuePerturbation(c)" required></textarea>
+                      <select v-if="c.type === 'category'" v-model="inputData[c.name]" class="common-style-input" :class="{
+                        'is-transformed': !dirty && transformationModifications.hasOwnProperty(c.name) && inputData[c.name] === transformationModifications[c.name],
+                        'is-dirty': dirty || inputData[c.name] !== originalData[c.name]
+                      }" @change="onValuePerturbation(c)" required>
+                        <option v-for="k in c.values" :key="k" :value="k">{{ k }}</option>
+                      </select>
+                      <div class="d-flex flex-column">
+                        <FeedbackPopover v-if="!isMiniMode" :inputLabel="c.name" :inputValue="inputData[c.name]" :originalValue="originalData[c.name]" :inputType="c.type" @submit="emit(dirty ? 'submitValueVariationFeedback' : 'submitValueFeedback', $event)" />
+                        <TransformationPopover v-if="catalogStore.transformationFunctionsByColumnType.hasOwnProperty(c.type)" :column="c.name" :column-type="c.type" />
+                      </div>
+                    </div>
+                    <div class="py-1 d-flex" v-else>
+                      <label class="info--text">{{ c.name }}</label>
+                      <span>{{ inputData[c.name] }}</span>
+                    </div>
+                  </ValidationProvider>
                 </div>
               </v-form>
             </v-card-text>
@@ -114,26 +75,14 @@
         </v-col>
 
         <v-col cols="12" md="6">
-          <PredictionResults
-              :model="model"
-              :dataset-id="dataset.id"
-              :targetFeature="dataset.target"
-              :modelFeatures="modelFeatures"
-              :classificationLabels="model.classificationLabels"
-              :predictionTask="model.modelType"
-              :inputData="inputData"
-              :modified="dirty || isInputNotOriginal"
-              :debouncingTimeout="debouncingTimeout"
-              @result="setResult"
-          />
+          <PredictionResults :model="model" :dataset-id="dataset.id" :targetFeature="dataset.target" :modelFeatures="modelFeatures" :classificationLabels="model.classificationLabels" :predictionTask="model.modelType" :inputData="inputData" :modified="dirty || isInputNotOriginal" :debouncingTimeout="debouncingTimeout" @result="setResult" />
           <v-card class="mb-4" outlined>
             <v-card-title>
               Explanation
             </v-card-title>
             <v-card-text>
-              <v-tabs
-                  :class="{'no-tab-header':  !isClassification(model.modelType) || textFeatureNames.length === 0}">
-                <v-tab v-if='modelFeatures.length>1'>
+              <v-tabs :class="{ 'no-tab-header': !isClassification(model.modelType) || textFeatureNames.length === 0 }">
+                <v-tab v-if='modelFeatures.length > 1'>
                   <v-icon left>mdi-align-horizontal-left</v-icon>
                   Global
                 </v-tab>
@@ -149,28 +98,14 @@
                   </template>
                   <span>Text explanation is not available because your model does not contain any text features</span>
                 </v-tooltip>
-                
-                  
-                <v-tab-item v-if='modelFeatures.length>1'>
-
-                  <PredictionExplanations :modelId="model.id"
-                                          :datasetId="dataset.id"
-                                          :targetFeature="dataset.target"
-                                          :classificationLabels="model.classificationLabels"
-                                          :predictionTask="model.modelType"
-                                          :inputData="inputData"
-                                          :modelFeatures="modelFeatures"
-                                          :debouncingTimeout="debouncingTimeout"
-                  />
+
+
+                <v-tab-item v-if='modelFeatures.length > 1'>
+
+                  <PredictionExplanations :modelId="model.id" :datasetId="dataset.id" :targetFeature="dataset.target" :classificationLabels="model.classificationLabels" :predictionTask="model.modelType" :inputData="inputData" :modelFeatures="modelFeatures" :debouncingTimeout="debouncingTimeout" />
                 </v-tab-item>
                 <v-tab-item v-if='textFeatureNames.length'>
-                  <TextExplanation :modelId="model.id"
-                                   :datasetId="dataset.id"
-                                   :textFeatureNames="textFeatureNames"
-                                   :classificationLabels="model.classificationLabels"
-                                   :classificationResult="classificationResult"
-                                   :inputData="inputData"
-                  />
+                  <TextExplanation :modelId="model.id" :datasetId="dataset.id" :textFeatureNames="textFeatureNames" :classificationLabels="model.classificationLabels" :classificationResult="classificationResult" :inputData="inputData" />
                 </v-tab-item>
               </v-tabs>
             </v-card-text>
@@ -178,121 +113,127 @@
         </v-col>
       </v-row>
     </ValidationObserver>
-
   </v-container>
 </template>
 
-<script lang="ts">
-import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
+<script setup lang="ts">
 import OverlayLoader from '@/components/OverlayLoader.vue';
 import PredictionResults from './PredictionResults.vue';
 import PredictionExplanations from './PredictionExplanations.vue';
 import TextExplanation from './TextExplanation.vue';
 import FeedbackPopover from '@/components/FeedbackPopover.vue';
-import {DatasetDTO, ModelDTO} from "@/generated-sources";
-import {isClassification} from "@/ml-utils";
+import { DatasetDTO, ModelDTO } from "@/generated-sources";
+import { isClassification } from "@/ml-utils";
 import mixpanel from "mixpanel-browser";
-import {anonymize} from "@/utils";
+import { anonymize } from "@/utils";
 import _ from 'lodash';
 import TransformationPopover from "@/components/TransformationPopover.vue";
-import {useCatalogStore} from "@/stores/catalog";
+import { useCatalogStore } from "@/stores/catalog";
+import { onMounted, ref, computed, watch } from 'vue';
+
+const catalogStore = useCatalogStore();
 
-@Component({
-    components: {
-        TransformationPopover,
-        OverlayLoader, PredictionResults, FeedbackPopover, PredictionExplanations, TextExplanation
-    }
+interface Props {
+  model: ModelDTO;
+  dataset: DatasetDTO;
+  originalData: any; // used for the variation feedback
+  transformationModifications: any; // used for the variation feedback
+  inputData: { [key: string]: string };
+  isMiniMode?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isMiniMode: false
 })
-export default class Inspector extends Vue {
-    @Prop({required: true}) model!: ModelDTO
-    @Prop({required: true}) dataset!: DatasetDTO
-    @Prop({required: true}) originalData!: object // used for the variation feedback
-    @Prop({required: true}) transformationModifications!: object // used for the variation feedback
-    @Prop({required: true}) inputData!: { [key: string]: string }
-    @Prop({default: false}) isMiniMode!: boolean;
-    loadingData = false;
-    featuresToView: string[] = []
-    errorLoadingMetadata = ""
-    dataErrorMsg = ""
-    classificationResult = null
-    isClassification = isClassification
-    debouncingTimeout: number = 500;
-
-    catalogStore = useCatalogStore()
-
-    async mounted() {
-        await this.loadMetaData();
-    }
-
-    @Watch('originalData')
-    public resetInput() {
-        this.$emit('reset');
-        (this.$refs.dataFormObserver as HTMLFormElement).reset();
-    }
-
-    get inputMetaData() {
-        if (!this.model) {
-            return [];
-        }
-
-        return Object.entries(this.dataset.columnTypes)
-            .map(([name, type]) => ({
-                name,
-                type,
-                values: this.dataset.categoryFeatures[name]
-            }))
-    }
-
-    @Watch('inputMetaData')
-    async loadMetaData() {
-        this.featuresToView = this.inputMetaData.map(e => e.name)
-    }
-
-    get isInputNotOriginal() { // used in case of opening a feedback where original data and input data passed are different
-        return JSON.stringify(this.inputData) !== JSON.stringify({...this.originalData, ...this.transformationModifications})
-    }
-
-    get textFeatureNames() {
-        return this.inputMetaData.filter(e => e.type == 'text').map(e => e.name)
-    }
-
-    public setResult(r) {
-        if (isClassification(this.model.modelType)) {
-            this.classificationResult = r
-        }
-    }
-
-    async onValuePerturbation(featureMeta) {
-        mixpanel.track("Feature perturbation", {
-            columnType: featureMeta.type,
-            featureName: anonymize(featureMeta.name),
-            modelId: this.model.id,
-            datasetId: this.dataset.id
-        })
-        this.$emit('update:inputData', this.inputData)
-    }
-
-    isFeatureEditable(featureName: string) {
-        if (!this.model.featureNames || this.model.featureNames.length == 0) {
-            // if user doesn't specify feature names consider all columns as feature names
-            return true;
-        }
-        return this.model.featureNames.includes(featureName)
-    }
-
-    get modelFeatures() {
-    return this.inputMetaData
-        .filter(x => (x.name !== this.dataset.target) && (!this.model.featureNames || this.model.featureNames.includes(x.name)))
-        .map(x => x.name);
+
+const loadingData = ref(false);
+const featuresToView = ref<string[]>([])
+const errorLoadingMetadata = ref("")
+const dataErrorMsg = ref("")
+const classificationResult = ref("")
+const debouncingTimeout = ref(500);
+const dataFormObserver = ref(null);
+
+const inputMetaData = computed(() => {
+  if (!props.model) {
+    return [];
   }
 
-  get datasetNonTargetColumns() {
-    return _.sortBy(this.inputMetaData.filter(x => x.name !== this.dataset.target),
-        e => !this.model.featureNames?.includes(e.name),
-        'name'
-    )
+  return Object.entries(props.dataset.columnTypes)
+    .map(([name, type]) => ({
+      name,
+      type,
+      values: props.dataset.categoryFeatures[name]
+    }))
+})
+
+const isInputNotOriginal = computed(() => {
+  return JSON.stringify(props.inputData) !== JSON.stringify({ ...props.originalData, ...props.transformationModifications })
+})
+
+const textFeatureNames = computed(() => {
+  return inputMetaData.value.filter(e => e.type == 'text').map(e => e.name)
+})
+
+const modelFeatures = computed(() => {
+  return inputMetaData.value
+    .filter(x => (x.name !== props.dataset.target) && (!props.model.featureNames || props.model.featureNames.includes(x.name)))
+    .map(x => x.name);
+})
+
+const datasetNonTargetColumns = computed(() => {
+  return _.sortBy(inputMetaData.value.filter(x => x.name !== props.dataset.target),
+    e => !props.model.featureNames?.includes(e.name),
+    'name'
+  )
+})
+
+function setResult(r: string) {
+  if (isClassification(props.model.modelType)) {
+    classificationResult.value = r
   }
 }
+
+function resetInput() {
+  emit('reset');
+  dataFormObserver.value && (dataFormObserver.value as HTMLFormElement).reset();
+}
+
+function isFeatureEditable(featureName: string) {
+  if (!props.model.featureNames || props.model.featureNames.length == 0) {
+    // if user doesn't specify feature names consider all columns as feature names
+    return true;
+  }
+  return props.model.featureNames.includes(featureName)
+}
+
+async function onValuePerturbation(featureMeta) {
+  mixpanel.track("Feature perturbation", {
+    columnType: featureMeta.type,
+    featureName: anonymize(featureMeta.name),
+    modelId: props.model.id,
+    datasetId: props.dataset.id
+  })
+  emit('update:inputData', props.inputData)
+}
+
+async function loadMetaData() {
+  featuresToView.value = inputMetaData.value.map(e => e.name)
+}
+
+const emit = defineEmits(['reset', 'update:inputData', 'submitValueVariationFeedback', 'submitValueFeedback']);
+
+watch(() => props.originalData, () => {
+  resetInput();
+})
+
+watch(() => inputMetaData.value, async () => {
+  await loadMetaData();
+})
+
+onMounted(async () => {
+  await loadMetaData();
+});
 </script>
 
 <style scoped lang="scss">
@@ -326,19 +267,21 @@ select.common-style-input {
 }
 
 .common-style-input.is-dirty {
-  background-color: #AD14572B; /* accent color but with opacity */
+  background-color: #AD14572B;
+  /* accent color but with opacity */
 }
 
 .common-style-input.is-transformed {
   background-color: #d1ecf1;
 }
 
-.v-card__subtitle, .v-card__text, .v-card__title {
+.v-card__subtitle,
+.v-card__text,
+.v-card__title {
   padding-bottom: 8px;
 }
 
-> > > .v-tabs.no-tab-header > .v-tabs-bar {
+>>>.v-tabs.no-tab-header>.v-tabs-bar {
   display: none;
 }
-
 </style>

From 7408315c331c545fb0246085a925e37427a71ddd Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Tue, 4 Jul 2023 10:18:29 +0200
Subject: [PATCH 03/10] Update TransformationPopover props

---
 .../src/components/TransformationPopover.vue  | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/TransformationPopover.vue b/frontend/src/components/TransformationPopover.vue
index 852726fbe6..24b241bb20 100644
--- a/frontend/src/components/TransformationPopover.vue
+++ b/frontend/src/components/TransformationPopover.vue
@@ -5,9 +5,7 @@
 
             <v-tooltip right>
                 <template v-slot:activator="{ on: onTooltip }">
-                    <v-btn small icon
-                           :color="hasTransformation ? 'primary' : 'grey'"
-                           v-on="{ ...onMenu, ...onTooltip }">
+                    <v-btn small icon :color="hasTransformation ? 'primary' : 'grey'" v-on="{ ...onMenu, ...onTooltip }">
                         <v-icon size=18>mdi-swap-horizontal</v-icon>
                     </v-btn>
                 </template>
@@ -20,12 +18,7 @@
                 <p>Transformation for '{{ column }}'</p>
             </v-card-title>
             <v-card-text>
-                <TransformationFunctionSelector label="Transformation to apply"
-                                                :column-type="columnType"
-                                                :column-name="column"
-                                                :value.sync="transformation.uuid"
-                                                :args.sync="transformation.params"
-                                                @onChanged="handleOnChanged"/>
+                <TransformationFunctionSelector label="Transformation to apply" :column-type="columnType" :column-name="column" :value.sync="transformation.uuid" :args.sync="transformation.params" @onChanged="handleOnChanged" />
             </v-card-text>
             <v-card-actions>
             </v-card-actions>
@@ -35,14 +28,13 @@
 
 <script setup lang="ts">
 
-import {storeToRefs} from "pinia";
-import {useInspectionStore} from "@/stores/inspection";
-import {computed, ref} from "vue";
+import { storeToRefs } from "pinia";
+import { useInspectionStore } from "@/stores/inspection";
+import { computed, ref } from "vue";
 import TransformationFunctionSelector from "@/views/main/utils/TransformationFunctionSelector.vue";
-import {ParameterizedCallableDTO} from "@/generated-sources";
+import { ParameterizedCallableDTO } from "@/generated-sources";
 
 const props = defineProps<{
-    projectId: number
     column: string,
     columnType: string
 }>()
@@ -55,7 +47,7 @@ const transformation = ref<Partial<ParameterizedCallableDTO>>({
 const opened = ref<boolean>(false);
 
 let inspectionStore = useInspectionStore();
-const {transformationFunctions} = storeToRefs(inspectionStore)
+const { transformationFunctions } = storeToRefs(inspectionStore)
 
 const hasTransformation = computed(() => transformationFunctions.hasOwnProperty(props.column));
 
@@ -71,7 +63,8 @@ div.v-card {
     opacity: 0.98;
     max-width: 500px;
 
-    & > *:nth-child(-n + 2) { // for the first two children: the title and the content
+    &>*:nth-child(-n + 2) {
+        // for the first two children: the title and the content
         padding-bottom: 0px;
     }
 

From 74a03cc51abbd430959f5454e7a4479a0aa467fd Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Tue, 4 Jul 2023 11:54:19 +0200
Subject: [PATCH 04/10] Convert PredictionResults to Composition API

---
 .../views/main/project/PredictionResults.vue  | 336 +++++++++---------
 1 file changed, 160 insertions(+), 176 deletions(-)

diff --git a/frontend/src/views/main/project/PredictionResults.vue b/frontend/src/views/main/project/PredictionResults.vue
index 64f86eaa9a..a79587c8df 100644
--- a/frontend/src/views/main/project/PredictionResults.vue
+++ b/frontend/src/views/main/project/PredictionResults.vue
@@ -14,8 +14,8 @@
             <div>Prediction</div>
             <v-tooltip bottom>
               <template v-slot:activator="{ on, attrs }">
-                <div class="text-h6" :class="classColorPrediction" v-on="prediction.length > maxLengthDisplayedCategory ? on : ''">
-                  {{ abbreviateMiddle(prediction, maxLengthDisplayedCategory) }}
+                <div class="text-h6" :class="classColorPrediction" v-on="prediction.length > maxLengthDisplayedCategoryComp ? on : ''">
+                  {{ abbreviateMiddle(prediction, maxLengthDisplayedCategoryComp) }}
                 </div>
               </template>
               <span> {{ prediction }}</span>
@@ -29,7 +29,7 @@
               <v-tooltip bottom>
                 <template v-slot:activator="{ on, attrs }">
                   <div class="text-h6">
-                    <div v-if="isDefined(actual)" v-on="actual.length > maxLengthDisplayedCategory ? on : ''">{{ abbreviateMiddle(actual, maxLengthDisplayedCategory) }}</div>
+                    <div v-if="isDefined(actual)" v-on="actual.length > maxLengthDisplayedCategoryComp ? on : ''">{{ abbreviateMiddle(actual, maxLengthDisplayedCategoryComp) }}</div>
                     <div v-else>-</div>
                   </div>
                 </template>
@@ -88,12 +88,11 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+<script setup lang="ts">
+import { ref, onMounted, watch, getCurrentInstance, computed } from "vue";
 import ResultPopover from "@/components/ResultPopover.vue"
 import LoadingFullscreen from "@/components/LoadingFullscreen.vue";
 import { api } from "@/api";
-import ECharts from "vue-echarts";
 import { use } from "echarts/core";
 import { BarChart } from "echarts/charts";
 import { CanvasRenderer } from "echarts/renderers";
@@ -105,198 +104,183 @@ import * as _ from "lodash";
 import { CanceledError } from "axios";
 
 use([CanvasRenderer, BarChart, GridComponent]);
-Vue.component("v-chart", ECharts);
 
-@Component({
-  components: { LoadingFullscreen, ResultPopover }
+const instance = getCurrentInstance();
+
+interface Props {
+  model: ModelDTO;
+  datasetId: string;
+  predictionTask: ModelType;
+  targetFeature: string;
+  modelFeatures: string[];
+  classificationLabels: string[];
+  inputData: { [key: string]: string };
+  modified?: boolean;
+  debounceTime?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modified: false,
+  debounceTime: 250,
+});
+
+const prediction = ref<string | number | undefined>("");
+const resultProbabilities = ref<any>({});
+const loading = ref<boolean>(false);
+const errorMsg = ref<string>("");
+const predCategoriesN = ref<number>(5);
+const controller = ref<AbortController | undefined>(undefined);
+const sizeResultCard = ref<number>(0);
+
+const actual = computed(() => {
+  if (props.targetFeature && !errorMsg.value) return props.inputData[props.targetFeature]
+  else return undefined
 })
-export default class PredictionResults extends Vue {
-  @Prop({ required: true }) model!: ModelDTO;
-  @Prop({ required: true }) datasetId!: string;
-  @Prop({ required: true }) predictionTask!: ModelType;
-  @Prop() targetFeature!: string;
-  @Prop() modelFeatures!: string[];
-  @Prop() classificationLabels!: string[];
-  @Prop() inputData!: { [key: string]: string };
-  @Prop({ default: false }) modified!: boolean;
-  @Prop({ default: 250 }) debounceTime!: number;
-
-
-  prediction: string | number | undefined = "";
-  resultProbabilities: object = {};
-  loading: boolean = false;
-  errorMsg: string = "";
-  isClassification = isClassification;
-  ModelType = ModelType;
-  predCategoriesN = 5;
-  controller?: AbortController;
-  sizeResultCard?= 0;
-
-  abbreviateMiddle = abbreviateMiddle;
-
-  async mounted() {
-    this.sizeResultCard = this.$parent?.$el.querySelector('#resultCard')?.clientWidth;
-    await this.submitPrediction()
-    window.addEventListener('resize', () => {
-      this.sizeResultCard = this.$parent?.$el.querySelector('#resultCard')?.clientWidth;
-    })
-  }
 
-  @Watch("inputData", { deep: true })
-  private async onInputDataChange() {
-    await this.debouncedSubmitPrediction();
+const isCorrectPrediction = computed(() => {
+  if (_.isNumber(actual.value) || _.isNumber(prediction.value)) {
+    return _.toNumber(actual.value) === _.toNumber(prediction.value);
+  } else {
+    return _.toString(actual.value) === _.toString(prediction.value);
   }
+})
 
-  private debouncedSubmitPrediction = _.debounce(async () => {
-    await this.submitPrediction();
-  }, this.debounceTime);
+const classColorPrediction = computed(() => {
+  if (!actual.value) return 'info--text text--darken-2'
+  else return isCorrectPrediction.value ? 'primary--text' : 'error--text'
+})
 
-  private async submitPrediction() {
-    if (this.controller) {
-      this.controller.abort();
-    }
-    this.controller = new AbortController();
-    if (Object.keys(this.inputData).length) {
-      try {
-        this.loading = true;
-        const predictionResult = (await api.predict(
-          this.model.id,
-          this.datasetId,
-          _.pick(this.inputData, this.modelFeatures),
-          this.controller
-        ))
-        this.prediction = predictionResult.prediction;
-        this.$emit("result", this.prediction);
-        this.resultProbabilities = predictionResult.probabilities
-        // Sort the object by value - solution based on:
-        // https://stackoverflow.com/questions/55319092/sort-a-javascript-object-by-key-or-value-es6
-        this.resultProbabilities = Object.entries(this.resultProbabilities)
-          .sort(([, v1], [, v2]) => +v2 - +v1)
-          .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
-        this.errorMsg = "";
-        this.loading = false;
-      } catch (error) {
-        if (!(error instanceof CanceledError)) {
-          this.errorMsg = error.response.data.detail;
-          this.prediction = undefined;
-          this.loading = false;
-        }
+async function submitPrediction() {
+  if (controller.value) {
+    controller.value.abort();
+  }
+  controller.value = new AbortController();
+  if (Object.keys(props.inputData).length) {
+    try {
+      loading.value = true;
+      const predictionResult = (await api.predict(
+        props.model.id,
+        props.datasetId,
+        _.pick(props.inputData, props.modelFeatures),
+        controller.value
+      ))
+      prediction.value = predictionResult.prediction;
+      emit("result", prediction.value);
+
+      resultProbabilities.value = Object.entries(predictionResult.probabilities)
+        .sort(([, v1], [, v2]) => +v2 - +v1)       // Sort the object by value - solution based on:
+        .reduce((r, [k, v]) => ({ ...r, [k]: v }), {}); // https://stackoverflow.com/questions/55319092/sort-a-javascript-object-by-key-or-value-es6
+
+      errorMsg.value = "";
+      loading.value = false;
+    } catch (error) {
+      if (!(error instanceof CanceledError)) {
+        errorMsg.value = error.response.data.detail;
+        prediction.value = undefined;
+        loading.value = false;
       }
-    } else {
-      // reset
-      this.errorMsg = "";
-      this.prediction = undefined;
-      this.resultProbabilities = {};
     }
+  } else {
+    // reset
+    errorMsg.value = "";
+    prediction.value = undefined;
+    resultProbabilities.value = {};
   }
+}
 
+const debouncedSubmitPrediction = _.debounce(async () => {
+  await submitPrediction();
+}, props.debounceTime);
 
-  get classColorPrediction() {
-    if (!this.isDefined(this.actual)) return 'info--text text--darken-2'
-    else return this.isCorrectPrediction ? 'primary--text' : 'error--text'
-  }
-
-  get isCorrectPrediction() {
-    if (_.isNumber(this.actual) || _.isNumber(this.prediction)) {
-      return _.toNumber(this.actual) === _.toNumber(this.prediction);
-    } else {
-      return _.toString(this.actual) === _.toString(this.prediction);
-    }
-  }
-
-  get actual() {
-    if (this.targetFeature && !this.errorMsg) return this.inputData[this.targetFeature]
-    else return undefined
-  }
+const maxLengthDisplayedCategoryComp = computed(() => {
+  return maxLengthDisplayedCategory(sizeResultCard.value);
+})
 
-  get maxLengthDisplayedCategory() {
-    return maxLengthDisplayedCategory(this.sizeResultCard);
-  }
+const chartOptions = computed(() => {
+  let results = firstNSortedByKey(resultProbabilities.value, predCategoriesN.value)
+  results = sliceLongCategoryName(results, maxLengthDisplayedCategoryComp.value)
+  return {
+    xAxis: {
+      type: "value",
+      min: 0,
+      max: 1,
+    },
+    yAxis: {
+      type: "category",
+      data: Object.keys(results),
+      axisLabel: {
+        interval: 0,
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        label: {
+          show: true,
+          position: "right",
+          formatter: (params: any) =>
+            params.value % 1 == 0
+              ? params.value
+              : params.value.toFixed(2).toLocaleString(),
+        },
+        data: Object.values(results),
+      },
+    ],
+    color: ["#0091EA"],
+    grid: {
+      width: "80%",
+      height: "80%",
+      top: "10%",
+      left: "10%",
+      right: "10%",
+      containLabel: true,
+    },
+  };
+});
+
+function firstNSortedByKey(obj: Object, n: number) {
+  let listed = Object.entries(obj)
+    .sort(([, a], [, b]) => a - b)
+    .slice(-n);
+  return Object.fromEntries(listed)
+}
 
+function sliceLongCategoryName(obj: Object, max_size: number) {
+  let res = Object.fromEntries(Object.entries(obj).map(function (elt) {
+    return ["".concat(...[abbreviateMiddle(elt[0], max_size)]), elt[1]]
+  }))
+  return res
+}
 
-  /**
-   * Getting first n entries of sorted objects and sort alphabetically, aggregating for "Others" options
-   *
-   * @param obj object
-   * @param n number of entries to keep
-   * @private
-   */
-  private firstNSortedByKey(obj: Object, n: number) {
+function isDefined(val: any) {
+  return !_.isNil(val);
+}
 
-    let listed = Object.entries(obj)
-      .sort(([, a], [, b]) => a - b)
-      .slice(-n);
-    return Object.fromEntries(listed)
+function chartInit() {
+  return {
+    renderer: 'svg'
   }
+}
 
-  /**
-   * For every element s of arr, if s.length > max_size return a new string with the n first characters then ... then the n last characters
-   * Helper to long category names
-   *
-   * @param obj Object
-   * @param max_size the size in which we start slicing
-   * @param n number of slice to keep
-   * @private
-   */
-  private sliceLongCategoryName(obj, max_size) {
-    let res = Object.fromEntries(Object.entries(obj).map(function (elt) {
-      return ["".concat(...[abbreviateMiddle(elt[0], max_size)]), elt[1]]
-    }))
-    return res
-  }
+const emit = defineEmits(["result"]);
 
-  isDefined(val: any) {
-    return !_.isNil(val);
-  }
+watch(() => props.inputData, async () => {
+  await debouncedSubmitPrediction();
+})
 
-  get chartInit() {
-    return {
-      renderer: 'svg'
-    }
+onMounted(async () => {
+  const clientWidth = instance?.proxy.$parent?.$el.querySelector('#resultCard')?.clientWidth;
+  if (clientWidth) {
+    sizeResultCard.value = clientWidth;
   }
+  await submitPrediction();
 
-  get chartOptions() {
-    let results = this.firstNSortedByKey(this.resultProbabilities, this.predCategoriesN)
-    results = this.sliceLongCategoryName(results, this.maxLengthDisplayedCategory)
-    return {
-      xAxis: {
-        type: "value",
-        min: 0,
-        max: 1,
-      },
-      yAxis: {
-        type: "category",
-        data: Object.keys(results),
-        axisLabel: {
-          interval: 0,
-        },
-      },
-      series: [
-        {
-          type: "bar",
-          label: {
-            show: true,
-            position: "right",
-            formatter: (params) =>
-              params.value % 1 == 0
-                ? params.value
-                : params.value.toFixed(2).toLocaleString(),
-          },
-          data: Object.values(results),
-        },
-      ],
-      color: ["#0091EA"],
-      grid: {
-        width: "80%",
-        height: "80%",
-        top: "10%",
-        left: "10%",
-        right: "10%",
-        containLabel: true,
-      },
-    };
+  if (clientWidth) {
+    window.addEventListener('resize', () => {
+      sizeResultCard.value = clientWidth;
+    })
   }
-}
+})
 </script>
 
 <style scoped>

From 5d3af67988fe561d3a240d5771bd03ae6566b825 Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Tue, 4 Jul 2023 12:41:58 +0200
Subject: [PATCH 05/10] Fix result labels when changing from row n to n+1/n-1

---
 frontend/src/views/main/project/InspectorWrapper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/main/project/InspectorWrapper.vue b/frontend/src/views/main/project/InspectorWrapper.vue
index f0514507ad..9c4cb64f69 100644
--- a/frontend/src/views/main/project/InspectorWrapper.vue
+++ b/frontend/src/views/main/project/InspectorWrapper.vue
@@ -75,7 +75,7 @@
         </v-row>
       </v-col>
     </v-row>
-    <Inspector :dataset='inspection.dataset' :inputData.sync='inputData' :model='inspection.model' :originalData='originalData' :transformationModifications="modifications" class='px-0' @reset='resetInput' @submitValueFeedback='submitValueFeedback' @submitValueVariationFeedback='submitValueVariationFeedback' v-if="totalRows > 0" />
+    <Inspector :dataset='inspection.dataset' :inputData.sync='inputData' :model='inspection.model' :originalData='originalData' :transformationModifications="modifications" class='px-0' @reset='resetInput' @submitValueFeedback='submitValueFeedback' @submitValueVariationFeedback='submitValueVariationFeedback' v-if="totalRows > 0" :key="inputData._GISKARD_INDEX_" />
     <v-alert v-else border="bottom" colored-border type="warning" class="mt-8" elevation="2">
       No data matches the selected filter.<br />
       In order to show data, please refine the filter's criteria.

From 536ffe952479d058302e97a009342a36c6c5d3a3 Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Tue, 4 Jul 2023 14:26:38 +0200
Subject: [PATCH 06/10] Format Inspector component

---
 frontend/src/views/main/project/Inspector.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/main/project/Inspector.vue b/frontend/src/views/main/project/Inspector.vue
index 0a9d418b3c..0850a36ec2 100644
--- a/frontend/src/views/main/project/Inspector.vue
+++ b/frontend/src/views/main/project/Inspector.vue
@@ -160,13 +160,13 @@ const inputMetaData = computed(() => {
   }
 
   return Object.entries(props.dataset.columnTypes)
-      .map(([name, type]) => ({
-          name,
-          type,
-          values: props.dataset.categoryFeatures ?
-              props.dataset.categoryFeatures[name] : []
-              // Provide an empty list in case of null due to DB migration
-      }))
+    .map(([name, type]) => ({
+      name,
+      type,
+      values: props.dataset.categoryFeatures ?
+        props.dataset.categoryFeatures[name] : []
+      // Provide an empty list in case of null due to DB migration
+    }))
 })
 
 const isInputNotOriginal = computed(() => {

From f1669323db178d8573799e5647dc3d66eeb78805 Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Fri, 7 Jul 2023 12:01:50 +0200
Subject: [PATCH 07/10] Make deboucingTimeout not reactive

---
 frontend/src/views/main/project/Inspector.vue | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/main/project/Inspector.vue b/frontend/src/views/main/project/Inspector.vue
index 85bcb31863..485637d0bf 100644
--- a/frontend/src/views/main/project/Inspector.vue
+++ b/frontend/src/views/main/project/Inspector.vue
@@ -105,20 +105,8 @@
                   <PredictionExplanations :modelId="model.id" :datasetId="dataset.id" :targetFeature="dataset.target" :classificationLabels="model.classificationLabels" :predictionTask="model.modelType" :inputData="inputData" :modelFeatures="modelFeatures" :debouncingTimeout="debouncingTimeout" />
                 </v-tab-item>
                 <v-tab-item v-if='textFeatureNames.length'>
-                  <TextExplanation v-if='model.modelType == ModelType.CLASSIFICATION'
-                                   :modelId='model.id'
-                                   :datasetId='dataset.id'
-                                   :textFeatureNames='textFeatureNames'
-                                   :classificationLabels='model.classificationLabels'
-                                   :classificationResult='classificationResult'
-                                   :inputData='inputData'
-                  />
-                  <RegressionTextExplanation v-else
-                                             :modelId='model.id'
-                                             :datasetId='dataset.id'
-                                             :textFeatureNames='textFeatureNames'
-                                             :inputData='inputData'
-                  />
+                  <TextExplanation v-if='model.modelType == ModelType.CLASSIFICATION' :modelId='model.id' :datasetId='dataset.id' :textFeatureNames='textFeatureNames' :classificationLabels='model.classificationLabels' :classificationResult='classificationResult' :inputData='inputData' />
+                  <RegressionTextExplanation v-else :modelId='model.id' :datasetId='dataset.id' :textFeatureNames='textFeatureNames' :inputData='inputData' />
                 </v-tab-item>
               </v-tabs>
             </v-card-text>
@@ -160,12 +148,13 @@ const props = withDefaults(defineProps<Props>(), {
   isMiniMode: false
 })
 
+const debouncingTimeout: number = 500;
+
 const loadingData = ref(false);
 const featuresToView = ref<string[]>([])
 const errorLoadingMetadata = ref("")
 const dataErrorMsg = ref("")
 const classificationResult = ref("")
-const debouncingTimeout = ref(500);
 const dataFormObserver = ref(null);
 
 const inputMetaData = computed(() => {

From 0375abe90790d80142b1427545b3bc6a9395df1e Mon Sep 17 00:00:00 2001
From: Henrique Chaves <44180294+henchaves@users.noreply.github.com>
Date: Fri, 7 Jul 2023 12:09:14 +0200
Subject: [PATCH 08/10] Update frontend/src/views/main/project/Inspector.vue

Co-authored-by: Kevin Messiaen <114553769+kevinmessiaen@users.noreply.github.com>
---
 frontend/src/views/main/project/Inspector.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/views/main/project/Inspector.vue b/frontend/src/views/main/project/Inspector.vue
index 485637d0bf..0fd43cd96b 100644
--- a/frontend/src/views/main/project/Inspector.vue
+++ b/frontend/src/views/main/project/Inspector.vue
@@ -166,8 +166,7 @@ const inputMetaData = computed(() => {
     .map(([name, type]) => ({
       name,
       type,
-      values: props.dataset.categoryFeatures ?
-        props.dataset.categoryFeatures[name] : []
+      values: props.dataset.categoryFeatures[name] ?? []
       // Provide an empty list in case of null due to DB migration
     }))
 })

From 58821272d513b075fbaebc5f6352844467f01ad9 Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Fri, 7 Jul 2023 14:05:24 +0200
Subject: [PATCH 09/10] Migrate TestExecutionResultBadge to Composition API

---
 .../main/project/TestExecutionResultBadge.vue | 44 +++++--------------
 1 file changed, 11 insertions(+), 33 deletions(-)

diff --git a/frontend/src/views/main/project/TestExecutionResultBadge.vue b/frontend/src/views/main/project/TestExecutionResultBadge.vue
index f80d457fa2..a00408dae9 100644
--- a/frontend/src/views/main/project/TestExecutionResultBadge.vue
+++ b/frontend/src/views/main/project/TestExecutionResultBadge.vue
@@ -1,28 +1,17 @@
 <template>
   <div>
-    <v-alert
-        border='left'
-        type='error'
-        v-if="result.status === 'ERROR'">
+    <v-alert border='left' type='error' v-if="result.status === 'ERROR'">
       {{ result.message }}
     </v-alert>
     <template v-for='testResult in result.result'>
-      <v-alert
-        tile
-        class='test-results'
-        :color='getBadgeColor(result.status)'
-        :type='TEST_RESULT_DATA[result.status].type'
-        dismissible
-        close-icon='mdi-close'
-      >
+      <v-alert tile class='test-results' :color='getBadgeColor(result.status)' :type='TEST_RESULT_DATA[result.status].type' dismissible close-icon='mdi-close'>
         <div class='d-flex justify-space-between align-center'>
           <div class='text-h6'>Test {{ result.status.toLowerCase() }}</div>
           <div class='text-body-2'>{{ result.executionDate | date }}</div>
         </div>
         <div class='d-flex justify-space-between align-center'>
           <div class='text-body-2'>Metric: {{ testResult.result.metric }}</div>
-          <div class='text-body-2 text-right'
-               v-if='testResult.result.messages && testResult.result.messages.length'>
+          <div class='text-body-2 text-right' v-if='testResult.result.messages && testResult.result.messages.length'>
             {{ testResult.result.messages[0].text }}
           </div>
           <!--              <a class="text-body-2 results-link text-decoration-underline">Full results</a>-->
@@ -32,31 +21,20 @@
   </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue';
+<script setup lang="ts">
 import { TestResult, TestTemplateExecutionResultDTO } from '@/generated-sources';
 import { testStatusToColor } from '@/views/main/tests/test-utils';
-import { Prop } from 'vue-property-decorator';
-import Component from 'vue-class-component';
 import { TEST_RESULT_DATA } from '@/utils/tests.utils';
 
-@Component({
-  computed: {
-    TEST_RESULT_DATA() {
-      return TEST_RESULT_DATA;
-    }
-  }
-})
-export default class TestExecutionResultBadge extends Vue {
-  @Prop({ required: true }) result!: TestTemplateExecutionResultDTO;
+interface Props {
+  result: TestTemplateExecutionResultDTO;
+}
 
-  getBadgeColor(testStatus: TestResult) {
-    return testStatusToColor(testStatus);
-  }
+const props = defineProps<Props>();
 
+function getBadgeColor(testStatus: TestResult) {
+  return testStatusToColor(testStatus);
 }
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

From 2700d42f71c110240f575712750deefe66c61a15 Mon Sep 17 00:00:00 2001
From: Kevin Messiaen <114553769+kevinmessiaen@users.noreply.github.com>
Date: Mon, 10 Jul 2023 09:51:03 +0700
Subject: [PATCH 10/10] Removed empty css

---
 frontend/src/views/main/project/TestExecutionResultBadge.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/views/main/project/TestExecutionResultBadge.vue b/frontend/src/views/main/project/TestExecutionResultBadge.vue
index a00408dae9..64d6a10702 100644
--- a/frontend/src/views/main/project/TestExecutionResultBadge.vue
+++ b/frontend/src/views/main/project/TestExecutionResultBadge.vue
@@ -37,4 +37,3 @@ function getBadgeColor(testStatus: TestResult) {
 }
 </script>
 
-<style scoped lang="scss"></style>