From 16be90de8b120df93acd25807025e4cc889de84b Mon Sep 17 00:00:00 2001
From: Henrique Chaves <henriquechavesmm@gmail.com>
Date: Fri, 9 Jun 2023 11:34:32 +0200
Subject: [PATCH] Fix slicing function name overflow

---
 .../views/main/project/InspectorWrapper.vue   | 389 +++++++++---------
 1 file changed, 189 insertions(+), 200 deletions(-)

diff --git a/frontend/src/views/main/project/InspectorWrapper.vue b/frontend/src/views/main/project/InspectorWrapper.vue
index a78aa57d37..02af786564 100644
--- a/frontend/src/views/main/project/InspectorWrapper.vue
+++ b/frontend/src/views/main/project/InspectorWrapper.vue
@@ -1,172 +1,161 @@
 <template>
   <v-container v-if="inspection" fluid class="vc">
-    <v-row align="center" no-gutters style='height: 60px;'>
-
-      <v-toolbar class='data-explorer-toolbar' flat>
-        <v-tooltip bottom min-width="400">
+    <v-row align="center" no-gutters>
+      <v-col lg="6" sm="12">
+        <v-toolbar class='data-explorer-toolbar' flat>
+          <v-tooltip bottom min-width="400">
             <template v-slot:activator="{ on, attrs }">
-                <v-icon v-on="on" class="pr-5" medium>info</v-icon>
+              <v-icon v-on="on" class="pr-16" medium>info</v-icon>
             </template>
             <h3> Debugging session </h3>
             <div class="d-flex">
-                <div> Id</div>
-                <v-spacer/>
-                <div> {{ inspection.id }}</div>
+              <div> Id</div>
+              <v-spacer />
+              <div> {{ inspection.id }}</div>
             </div>
             <div class="d-flex">
-                <div> Name</div>
-                <v-spacer/>
-                <div class="pl-5"> {{ inspection.name || "-" }}</div>
+              <div> Name</div>
+              <v-spacer />
+              <div class="pl-5"> {{ inspection.name || "-" }}</div>
             </div>
-            <br/>
+            <br />
             <h3> Model </h3>
             <div class="d-flex">
-                <div> Id</div>
-                <v-spacer/>
-                <div> {{ inspection.model.id }}</div>
+              <div> Id</div>
+              <v-spacer />
+              <div> {{ inspection.model.id }}</div>
             </div>
             <div class="d-flex">
-                <div> Name</div>
-                <v-spacer/>
-                <div class="pl-5"> {{ inspection.model.name }}</div>
+              <div> Name</div>
+              <v-spacer />
+              <div class="pl-5"> {{ inspection.model.name }}</div>
             </div>
-            <br/>
+            <br />
             <h3> Dataset </h3>
             <div class="d-flex">
-                <div> Id</div>
-                <v-spacer/>
-                <div> {{ inspection.dataset.id }}</div>
+              <div> Id</div>
+              <v-spacer />
+              <div> {{ inspection.dataset.id }}</div>
             </div>
             <div class="d-flex pb-3">
-                <div> Name</div>
-                <v-spacer/>
-                <div class="pl-5"> {{ inspection.dataset.name }}</div>
+              <div> Name</div>
+              <v-spacer />
+              <div class="pl-5"> {{ inspection.dataset.name }}</div>
             </div>
-        </v-tooltip>
+          </v-tooltip>
           <span class='subtitle-1 mr-2'>Dataset Explorer</span>
           <v-btn icon @click='shuffleMode = !shuffleMode'>
-              <v-icon v-if='shuffleMode' color='primary'>mdi-shuffle-variant</v-icon>
-              <v-icon v-else>mdi-shuffle-variant</v-icon>
+            <v-icon v-if='shuffleMode' color='primary'>mdi-shuffle-variant</v-icon>
+            <v-icon v-else>mdi-shuffle-variant</v-icon>
           </v-btn>
           <v-btn :disabled='!canPrevious' icon @click='previous'>
-              <v-icon>mdi-skip-previous</v-icon>
+            <v-icon>mdi-skip-previous</v-icon>
           </v-btn>
           <v-btn :disabled='!canNext' icon @click='next'>
-              <v-icon>mdi-skip-next</v-icon>
+            <v-icon>mdi-skip-next</v-icon>
           </v-btn>
 
           <span class='caption grey--text' v-if="totalRows > 0">
-          Entry #{{ totalRows === 0 ? 0 : rowNb + 1 }} / {{ totalRows }}
-        </span>
-          <span v-show="originalData && isDefined(originalData['Index'])" class='caption grey--text'
-                style='margin-left: 15px'>Row Index {{ originalData['Index'] + 1 }}</span>
-          <v-chip class="ml-2" outlined link
-                  :color="inspection.sample ? 'purple' : 'primary'"
-                  @click="handleSwitchSample" x-small>
-              {{ inspection.sample ? 'Sample' : 'Whole' }} data
+            Entry #{{ totalRows === 0 ? 0 : rowNb + 1 }} / {{ totalRows }}
+          </span>
+          <span v-show="originalData && isDefined(originalData['Index'])" class='caption grey--text' style='margin-left: 15px'>Row Index {{ originalData['Index'] + 1 }}</span>
+          <v-chip class="ml-2" outlined link :color="inspection.sample ? 'purple' : 'primary'" @click="handleSwitchSample" x-small>
+            {{ inspection.sample ? 'Sample' : 'Whole' }} data
           </v-chip>
-      </v-toolbar>
-        <v-spacer/>
-
-        <SlicingFunctionSelector label="Slice to apply" :project-id="projectId"
-                                 :full-width="false" :icon="true" class="mr-3"
-                                 :allow-no-code-slicing="true"
-                                 @onChanged="processDataset"
-                                 :value.sync="selectedSlicingFunction.uuid"
-                                 :args.sync="selectedSlicingFunction.params"
-                                 :dataset="inspection.dataset"/>
-
-        <InspectionFilter :is-target-available="isDefined(inspection.dataset.target)" :labels="labels"
-                          :model-type="inspection.model.modelType" @input="f => filter = f"/>
+        </v-toolbar>
+      </v-col>
+      <v-col lg="6" sm="12" class="pl-4">
+        <v-row no-gutters align="center">
+          <v-col cols="8" class="pb-4">
+            <SlicingFunctionSelector label="Slice to apply" :project-id="projectId" :full-width="false" :icon="true" class="mr-3" :allow-no-code-slicing="true" @onChanged="processDataset" :value.sync="selectedSlicingFunction.uuid" :args.sync="selectedSlicingFunction.params" :dataset="inspection.dataset" />
+          </v-col>
+          <v-col cols="4" class="d-flex pl-2">
+            <InspectionFilter :is-target-available="isDefined(inspection.dataset.target)" :labels="labels" :model-type="inspection.model.modelType" @input="f => filter = f" />
+          </v-col>
+        </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"/>
-      <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.
-      </v-alert>
-
-
-      <!-- For general feedback -->
-      <v-tooltip left>
-          <template v-slot:activator='{ on, attrs }'>
-              <v-btn :class="feedbackPopupToggle ? 'secondary' : 'primary'" bottom fab fixed class="zindex-10" right
-                     v-bind='attrs' @click='feedbackPopupToggle = !feedbackPopupToggle' v-on='on'>
-                  <v-icon v-if='feedbackPopupToggle'>mdi-close</v-icon>
-                  <v-icon v-else>mdi-message-plus</v-icon>
-              </v-btn>
-          </template>
-          <span v-if='feedbackPopupToggle'>Close</span>
-          <span v-else>Feedback</span>
-      </v-tooltip>
-      <v-overlay :value='feedbackPopupToggle' :z-index='10'></v-overlay>
-      <v-card v-if='feedbackPopupToggle' id='feedback-card' color='primary' dark>
-          <v-card-title>Is this input case insightful?</v-card-title>
-          <v-card-text class='px-3 py-0'>
-              <v-radio-group v-model='feedbackChoice' class='mb-2 mt-0' dark hide-details row>
-                  <v-radio label='Yes' value='yes'></v-radio>
-                  <v-radio label='No' value='no'></v-radio>
-                  <v-radio label='Other' value='other'></v-radio>
-              </v-radio-group>
-              <v-textarea v-model='feedback' :disabled='feedbackSubmitted' hide-details no-resize outlined
-                          placeholder='Why?' rows='2'></v-textarea>
-          </v-card-text>
-          <p v-if='feedbackError' class='caption error--text mb-0'>{{ feedbackError }}</p>
-          <v-card-actions>
-              <v-spacer></v-spacer>
-              <v-btn :disabled='feedbackSubmitted' light small text @click='clearFeedback'>Cancel</v-btn>
-              <v-btn :disabled='!(feedback && feedbackChoice) || feedbackSubmitted' class='mx-1' color='white' light
-                     small @click='submitGeneralFeedback'>
-                  Send
-              </v-btn>
-              <v-icon v-show='feedbackSubmitted' color='white'>mdi-check</v-icon>
-          </v-card-actions>
-      </v-card>
-      <!-- End For general feedback -->
+    <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" />
+    <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.
+    </v-alert>
+
+
+    <!-- For general feedback -->
+    <v-tooltip left>
+      <template v-slot:activator='{ on, attrs }'>
+        <v-btn :class="feedbackPopupToggle ? 'secondary' : 'primary'" bottom fab fixed class="zindex-10" right v-bind='attrs' @click='feedbackPopupToggle = !feedbackPopupToggle' v-on='on'>
+          <v-icon v-if='feedbackPopupToggle'>mdi-close</v-icon>
+          <v-icon v-else>mdi-message-plus</v-icon>
+        </v-btn>
+      </template>
+      <span v-if='feedbackPopupToggle'>Close</span>
+      <span v-else>Feedback</span>
+    </v-tooltip>
+    <v-overlay :value='feedbackPopupToggle' :z-index='10'></v-overlay>
+    <v-card v-if='feedbackPopupToggle' id='feedback-card' color='primary' dark>
+      <v-card-title>Is this input case insightful?</v-card-title>
+      <v-card-text class='px-3 py-0'>
+        <v-radio-group v-model='feedbackChoice' class='mb-2 mt-0' dark hide-details row>
+          <v-radio label='Yes' value='yes'></v-radio>
+          <v-radio label='No' value='no'></v-radio>
+          <v-radio label='Other' value='other'></v-radio>
+        </v-radio-group>
+        <v-textarea v-model='feedback' :disabled='feedbackSubmitted' hide-details no-resize outlined placeholder='Why?' rows='2'></v-textarea>
+      </v-card-text>
+      <p v-if='feedbackError' class='caption error--text mb-0'>{{ feedbackError }}</p>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn :disabled='feedbackSubmitted' light small text @click='clearFeedback'>Cancel</v-btn>
+        <v-btn :disabled='!(feedback && feedbackChoice) || feedbackSubmitted' class='mx-1' color='white' light small @click='submitGeneralFeedback'>
+          Send
+        </v-btn>
+        <v-icon v-show='feedbackSubmitted' color='white'>mdi-check</v-icon>
+      </v-card-actions>
+    </v-card>
+    <!-- End For general feedback -->
   </v-container>
 </template>
 
 <script setup lang='ts'>
-import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
-import {api} from '@/api';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { api } from '@/api';
 import Inspector from './Inspector.vue';
 import Mousetrap from 'mousetrap';
 import {
-    CreateFeedbackDTO,
-    DatasetProcessingResultDTO,
-    Filter,
-    InspectionDTO,
-    ModelType,
-    ParameterizedCallableDTO,
-    RowFilterType
+  CreateFeedbackDTO,
+  DatasetProcessingResultDTO,
+  Filter,
+  InspectionDTO,
+  ModelType,
+  ParameterizedCallableDTO,
+  RowFilterType
 } from '@/generated-sources';
 import mixpanel from "mixpanel-browser";
 import _ from "lodash";
 import InspectionFilter from './InspectionFilter.vue';
 import SlicingFunctionSelector from "@/views/main/utils/SlicingFunctionSelector.vue";
-import {useCatalogStore} from "@/stores/catalog";
-import {storeToRefs} from "pinia";
-import {useInspectionStore} from "@/stores/inspection";
-import {$vfm} from "vue-final-modal";
+import { useCatalogStore } from "@/stores/catalog";
+import { storeToRefs } from "pinia";
+import { useInspectionStore } from "@/stores/inspection";
+import { $vfm } from "vue-final-modal";
 import BlockingLoadingModal from "@/views/main/project/modals/BlockingLoadingModal.vue";
-import {confirm} from "@/utils/confirmation.utils";
+import { confirm } from "@/utils/confirmation.utils";
 
 interface CreatedFeedbackCommonDTO {
-    targetFeature?: string | null;
-    userData: string;
-    modelId: string;
-    datasetId: string;
-    originalData: string;
-    projectId: number
+  targetFeature?: string | null;
+  userData: string;
+  modelId: string;
+  datasetId: string;
+  originalData: string;
+  projectId: number
 }
 
 interface Props {
-    inspectionId: number;
-    projectId: number;
-    isProjectOwnerOrAdmin: boolean;
+  inspectionId: number;
+  projectId: number;
+  isProjectOwnerOrAdmin: boolean;
 }
 
 const props = defineProps<Props>();
@@ -188,14 +177,14 @@ const feedbackError = ref('');
 const feedbackSubmitted = ref(false);
 const labels = ref<string[]>([]);
 const filter = ref<Filter>({
-    inspectionId: props.inspectionId,
-    type: RowFilterType.ALL
+  inspectionId: props.inspectionId,
+  type: RowFilterType.ALL
 });
 
 const selectedSlicingFunction = ref<Partial<ParameterizedCallableDTO>>({
-    uuid: undefined,
-    params: [],
-    type: 'SLICING'
+  uuid: undefined,
+  params: [],
+  type: 'SLICING'
 });
 
 const dataProcessingResult = ref<DatasetProcessingResultDTO | null>(null);
@@ -211,7 +200,7 @@ const percentRegressionUnit = ref(true);
 
 const canPrevious = computed(() => !shuffleMode.value && rowNb.value > 0);
 const canNext = computed(() => rowNb.value < totalRows.value - 1);
-const {transformationFunctions} = storeToRefs(useInspectionStore());
+const { transformationFunctions } = storeToRefs(useInspectionStore());
 
 function commonFeedbackData(): CreatedFeedbackCommonDTO {
   return {
@@ -304,7 +293,7 @@ watch(() => [
   filter.value,
   shuffleMode.value,
   percentRegressionUnit.value,
-    dataProcessingResult.value
+  dataProcessingResult.value
 ], async (nv, ov) => applyFilter(nv, ov), { deep: true, immediate: false });
 
 async function updateRow(forceFetch) {
@@ -321,66 +310,66 @@ async function fetchRows(rowIdxInResults: number, forceFetch: boolean) {
   const remainder = rowIdxInResults % itemsPerPage;
   const newPage = Math.floor(rowIdxInResults / itemsPerPage);
   if ((rowIdxInResults > 0 && remainder === 0) || forceFetch) {
-      const result = await api.getDatasetRows(inspection.value!.dataset.id,
-          newPage * itemsPerPage, itemsPerPage, {
-              filter: {
-                  ...filter.value,
-                  inspectionId: props.inspectionId
-              },
-              removeRows: dataProcessingResult.value?.filteredRows
-          }, inspection.value!.sample, shuffleMode.value)
-      rows.value = result.content;
-      numberOfRows.value = result.totalItems;
+    const result = await api.getDatasetRows(inspection.value!.dataset.id,
+      newPage * itemsPerPage, itemsPerPage, {
+      filter: {
+        ...filter.value,
+        inspectionId: props.inspectionId
+      },
+      removeRows: dataProcessingResult.value?.filteredRows
+    }, inspection.value!.sample, shuffleMode.value)
+    rows.value = result.content;
+    numberOfRows.value = result.totalItems;
   }
 }
 
 
 function assignCurrentRow(forceFetch: boolean) {
-    rowIdxInPage.value = rowNb.value % itemsPerPage;
-    loadingData.value = true;
-
-    inputData.value = rows.value[rowIdxInPage.value];
-    originalData.value = {...inputData.value}; // deep copy to avoid caching mechanisms
-    dataErrorMsg.value = '';
-    loadingData.value = false;
-    totalRows.value = numberOfRows.value;
-    if (forceFetch) {
-        rowNb.value = 0;
-    }
+  rowIdxInPage.value = rowNb.value % itemsPerPage;
+  loadingData.value = true;
+
+  inputData.value = rows.value[rowIdxInPage.value];
+  originalData.value = { ...inputData.value }; // deep copy to avoid caching mechanisms
+  dataErrorMsg.value = '';
+  loadingData.value = false;
+  totalRows.value = numberOfRows.value;
+  if (forceFetch) {
+    rowNb.value = 0;
+  }
 }
 
 
 const modifications = computed(() => dataProcessingResult.value?.modifications?.find(m => m.rowId === originalData.value['_GISKARD_INDEX_'])?.modifications ?? {});
 
 function resetInput() {
-    inputData.value = {
-        ...originalData.value,
-        ...modifications.value
-    };
+  inputData.value = {
+    ...originalData.value,
+    ...modifications.value
+  };
 }
 
 async function doSubmitFeedback(payload: CreateFeedbackDTO) {
-    mixpanel.track('Submit feedback', {
-        datasetId: payload.datasetId,
-        feedbackChoice: payload.feedbackChoice,
-        feedbackType: payload.feedbackType,
-        modelId: payload.modelId,
-        projectId: payload.projectId
-    });
-    await api.submitFeedback(payload, payload.projectId);
+  mixpanel.track('Submit feedback', {
+    datasetId: payload.datasetId,
+    feedbackChoice: payload.feedbackChoice,
+    feedbackType: payload.feedbackType,
+    modelId: payload.modelId,
+    projectId: payload.projectId
+  });
+  await api.submitFeedback(payload, payload.projectId);
 }
 
 const transformationPipeline = computed(() => Object.values(transformationFunctions.value))
 
-watch(() => transformationPipeline.value, processDataset, {deep: true})
+watch(() => transformationPipeline.value, processDataset, { deep: true })
 
 async function processDataset() {
-    const pipeline = [selectedSlicingFunction.value, ...transformationPipeline.value]
-        .filter(callable => !!callable.uuid) as Array<ParameterizedCallableDTO>;
+  const pipeline = [selectedSlicingFunction.value, ...transformationPipeline.value]
+    .filter(callable => !!callable.uuid) as Array<ParameterizedCallableDTO>;
 
-    loadingProcessedDataset.value = true;
-    dataProcessingResult.value = await api.datasetProcessing(props.projectId, inspection.value!.dataset.id, pipeline, inspection.value!.sample)
-    loadingProcessedDataset.value = false;
+  loadingProcessedDataset.value = true;
+  dataProcessingResult.value = await api.datasetProcessing(props.projectId, inspection.value!.dataset.id, pipeline, inspection.value!.sample)
+  loadingProcessedDataset.value = false;
 }
 
 function bindKeys() {
@@ -394,51 +383,51 @@ function resetKeys() {
 
 
 async function init() {
-    inspection.value = await api.getInspection(props.inspectionId);
-    useInspectionStore().$reset();
-    await useCatalogStore().loadCatalog(props.projectId);
+  inspection.value = await api.getInspection(props.inspectionId);
+  useInspectionStore().$reset();
+  await useCatalogStore().loadCatalog(props.projectId);
 }
 
 onMounted(async () => {
-    labels.value = await api.getLabelsForTarget(props.inspectionId);
-    bindKeys();
-    await init();
+  labels.value = await api.getLabelsForTarget(props.inspectionId);
+  bindKeys();
+  await init();
 });
 
 onUnmounted(() => {
-    resetKeys();
+  resetKeys();
 });
 
 async function handleSwitchSample() {
-    if (inspection.value!.sample) {
-        const confirmed = await confirm($vfm, 'Inspect whole dataset', 'Opening the debugger on the whole data might cause performance issues');
-        if (!confirmed) {
-            return;
-        }
+  if (inspection.value!.sample) {
+    const confirmed = await confirm($vfm, 'Inspect whole dataset', 'Opening the debugger on the whole data might cause performance issues');
+    if (!confirmed) {
+      return;
     }
+  }
 
-    await $vfm.show({
-        component: BlockingLoadingModal,
-        bind: {
-            title: "Preprocessing dataset",
-            text: "Please wait. This operation might take some time."
-        },
-        on: {
-            async mounted(close) {
-                try {
-                    inspection.value = await api.updateInspectionName(inspection.value!.id, {
-                        name: inspection.value!.name,
-                        datasetId: inspection.value!.dataset.id,
-                        modelId: inspection.value!.model.id,
-                        sample: !inspection.value!.sample
-                    });
-                    await updateRow(true);
-                } finally {
-                    close();
-                }
-            }
+  await $vfm.show({
+    component: BlockingLoadingModal,
+    bind: {
+      title: "Preprocessing dataset",
+      text: "Please wait. This operation might take some time."
+    },
+    on: {
+      async mounted(close) {
+        try {
+          inspection.value = await api.updateInspectionName(inspection.value!.id, {
+            name: inspection.value!.name,
+            datasetId: inspection.value!.dataset.id,
+            modelId: inspection.value!.model.id,
+            sample: !inspection.value!.sample
+          });
+          await updateRow(true);
+        } finally {
+          close();
         }
-    });
+      }
+    }
+  });
 }
 </script>