[GSK-1540] Make it possible to create a slicing function directly from Catalog

frontend/src/components/SuiteInputListSelector.vue

@@ -4,7 +4,7 @@
             <v-row>
                 <v-col>
                     <v-list-item-content class="py-2">
-                        <v-list-item-title class="input-name">{{ input.name }}: <span class="input-type">{{ input.type }}</span> <span v-if="test?.args[index].optional" class="input-type">= {{ test.args[index].defaultValue }}</span>
+                        <v-list-item-title class="input-name">{{ input.name }}: <span class="input-type">{{ input.type }}</span> <span v-if="test?.args[index].optional" class="input-type">= {{ test.args[index].defaultValue ?? 'None' }}</span>
                             <v-tooltip bottom v-if="doc && doc.args.hasOwnProperty(input.name)">
                                 <template v-slot:activator="{ on, attrs }">
                                     <v-icon v-bind="attrs" v-on="on">info</v-icon>
@@ -67,7 +67,7 @@ import SlicingFunctionSelector from "@/views/main/utils/SlicingFunctionSelector.
 import { useCatalogStore } from "@/stores/catalog";
 import TransformationFunctionSelector from "@/views/main/utils/TransformationFunctionSelector.vue";
 import KwargsCodeEditor from "@/views/main/utils/KwargsCodeEditor.vue";
-import {ParsedDocstring} from "@/utils/python-doc.utils";
+import { ParsedDocstring } from "@/utils/python-doc.utils";
 
 interface Props {
     functionInputs?: { [key: string]: FunctionInputDTO };

frontend/src/views/main/project/FiltersCatalog.vue

@@ -37,7 +37,17 @@
                                         </v-list-item-content>
                                     </v-list-item>
                                 </template>
+                                <v-divider />
                             </v-list-item-group>
+                            <v-list-item @click="openSliceModal">
+                                <v-list-item-content>
+                                    <v-list-item-title class="create-slice-item">
+                                        <v-icon class="mb-1">add</v-icon>
+                                        CREATE NEW SLICING FUNCTION
+                                    </v-list-item-title>
+                                </v-list-item-content>
+                            </v-list-item>
+                            <v-divider />
                         </v-list>
                     </v-col>
                     <v-col cols="8" v-if="selected" class="vc fill-height">
@@ -167,6 +177,8 @@ import CodeSnippet from "@/components/CodeSnippet.vue";
 import IEditorOptions = editor.IEditorOptions;
 import mixpanel from "mixpanel-browser";
 import { anonymize } from "@/utils";
+import { $vfm } from 'vue-final-modal';
+import CreateSliceCatalogModal from "./modals/CreateSliceCatalogModal.vue";
 
 let props = defineProps<{
     projectId: number,
@@ -277,6 +289,20 @@ const inputType = computed(() => chain(selected.value?.args ?? [])
 
 const doc = computed(() => extractArgumentDocumentation(selected.value));
 
+function openSliceModal() {
+    $vfm.show({
+        component: CreateSliceCatalogModal,
+        bind: {
+            projectId: props.projectId,
+        },
+        on: {
+            created: (uuid) => {
+                selected.value = slicingFunctions.value.find(t => t.uuid === uuid);
+            }
+        }
+    })
+}
+
 
 </script>
 
@@ -361,4 +387,10 @@ const doc = computed(() => extractArgumentDocumentation(selected.value));
 .list-func-name {
     font-weight: 500;
 }
+
+.create-slice-item {
+    text-align: center;
+    font-size: 1.125rem;
+    white-space: break-spaces;
+}
 </style>

frontend/src/views/main/project/modals/CreateSliceCatalogModal.vue

@@ -0,0 +1,111 @@
+<template>
+  <vue-final-modal v-slot="{ close }" v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
+    <div class="text-center">
+      <v-card class="modal-card">
+        <v-card-title>
+          Create new slicing function
+        </v-card-title>
+        <v-card-text>
+          <v-row v-if="false">
+            <v-col>
+              <p class="text-subtitle-1 text-left mb-0">Select the scope</p>
+              <v-radio-group v-model="scope" class="mt-0" row>
+                <v-radio label="Specific dataset" value="dataset"></v-radio>
+
+                <v-tooltip bottom>
+                  <template v-slot:activator="{ on, attrs }">
+                    <div v-on="on">
+                      <v-radio label="General" value="general" disabled></v-radio>
+                    </div>
+                  </template>
+                  <span>Coming soon</span>
+                </v-tooltip>
+              </v-radio-group>
+            </v-col>
+          </v-row>
+          <v-row v-if="scope === 'dataset'">
+            <v-col>
+              <p class="text-subtitle-1 text-left mb-1">Select a dataset to check the validity of your slicing function</p>
+              <DatasetSelector :projectId="projectId" :value.sync="selectedDataset" :return-object="true" label="Dataset" class="selector mb-4">
+              </DatasetSelector>
+            </v-col>
+          </v-row>
+          <v-row v-if="scope === 'dataset' && selectedDataset !== null">
+            <v-col>
+              <p class="text-subtitle-1 text-left mb-1">Define slice parameters</p>
+              <ColumnFilterCreator v-for="(columnFilter, idx) in columnFilters" :key="idx" :dataset="selectedDataset" :column-name.sync="columnFilter.columnName" :column-type.sync="columnFilter.columnType" :slicing-type.sync="columnFilter.comparisonType" :value.sync="columnFilter.value" />
+            </v-col>
+          </v-row>
+
+        </v-card-text>
+        <v-card-actions>
+          <div class="flex-grow-1"></div>
+          <v-btn text @click="close">Cancel</v-btn>
+          <v-btn color="primary" @click="create(close)" :disabled="isButtonDisabled">
+            Create</v-btn>
+        </v-card-actions>
+      </v-card>
+    </div>
+  </vue-final-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { DatasetDTO, ColumnType, ComparisonClauseDTO } from '@/generated-sources';
+import DatasetSelector from '@/views/main/utils/DatasetSelector.vue';
+import ColumnFilterCreator from "@/views/main/utils/ColumnFilterCreator.vue";
+import { useCatalogStore } from "@/stores/catalog";
+
+
+interface Props {
+  projectId: number;
+}
+
+const props = defineProps<Props>();
+
+const columnFilters = ref<Array<Partial<ComparisonClauseDTO & { columnType: ColumnType }>>>([{}]);
+
+
+const scope = ref<string>('dataset');
+const selectedDataset = ref<DatasetDTO | null>(null);
+
+const isButtonDisabled = computed(() => {
+  if (scope.value === 'dataset') {
+    return selectedDataset.value === null || columnFilters.value.length === 0 || columnFilters.value.some(f => f.columnName === undefined || f.columnType === undefined || f.comparisonType === undefined)
+  }
+})
+
+
+const emit = defineEmits(['created']);
+
+async function create(close) {
+  if (selectedDataset.value === null) {
+    return
+  }
+  const slicingFunction = await useCatalogStore().createSlicingFunction(selectedDataset.value, columnFilters.value)
+  emit('created', slicingFunction.uuid);
+  close();
+}
+</script>
+
+<style scoped>
+::v-deep(.modal-container) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+::v-deep(.modal-content) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 0 1rem;
+  padding: 1rem;
+}
+
+.modal-card {
+  min-width: 50vw;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+</style>