From 05cbf737572a4f04d26cf8000dbfc7620193a1fe Mon Sep 17 00:00:00 2001
From: Sean Niklas Semmler <sean.semmler@uni-ulm.de>
Date: Mon, 28 Aug 2023 10:28:11 +0200
Subject: [PATCH 01/15] fix: fix Loading Bug

---
 frontendVue3/src/views/Home.vue   | 4 ++--
 frontendVue3/src/views/Models.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontendVue3/src/views/Home.vue b/frontendVue3/src/views/Home.vue
index 96c60455..470e38dc 100644
--- a/frontendVue3/src/views/Home.vue
+++ b/frontendVue3/src/views/Home.vue
@@ -33,7 +33,7 @@
 
 <script setup>
 import FeatureModelTable from '@/components/FeatureModelTable.vue';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useFileStore } from '@/store/file';
 
@@ -83,7 +83,7 @@ const tags = [];
 const check1 = false;
 const check2 = false;
 const check3 = false;
-const loading = true;
+const loading = ref(false);
 const info = '';
 const showTutorial = false;
 const tutorialSteps = [
diff --git a/frontendVue3/src/views/Models.vue b/frontendVue3/src/views/Models.vue
index b8224fa5..8f64caa5 100644
--- a/frontendVue3/src/views/Models.vue
+++ b/frontendVue3/src/views/Models.vue
@@ -43,7 +43,7 @@
 
 <script setup>
 import FeatureModelTable from '@/components/FeatureModelTable.vue';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useFileStore } from '@/store/file';
 import { useAppStore } from '@/store/app';
@@ -97,7 +97,7 @@ const tags = [];
 const check1 = false;
 const check2 = false;
 const check3 = false;
-const loading = true;
+const loading = ref(false);
 const info = '';
 const showTutorial = false;
 const tutorialSteps = [

From 520338f9a5c500665e4b4bd8a87615ae9366dede Mon Sep 17 00:00:00 2001
From: Sean Niklas Semmler <sean.semmler@uni-ulm.de>
Date: Mon, 28 Aug 2023 10:29:51 +0200
Subject: [PATCH 02/15] fix: Changed Not Working Link

---
 frontendVue3/src/store/file.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontendVue3/src/store/file.js b/frontendVue3/src/store/file.js
index 057fb01a..9e9f5318 100644
--- a/frontendVue3/src/store/file.js
+++ b/frontendVue3/src/store/file.js
@@ -26,7 +26,8 @@ export const useFileStore = defineStore('file', {
     },
     actions: {
         fetchConfirmedFeatureModels() {
-            api.get(`${API_URL}files/uploaded/confirmed/`).then((response) => {
+            //api.get(`${API_URL}files/uploaded/confirmed/`).then((response) => {
+            api.get(`${API_URL}files/`).then((response) => {
                 this.confirmedFeatureModels = response.data;
                 console.log(response.data[0]);
             });

From 35f4ee8a08bcfadd0dccec51a76a0205e9df5f0a Mon Sep 17 00:00:00 2001
From: Sean Niklas Semmler <sean.semmler@uni-ulm.de>
Date: Mon, 28 Aug 2023 12:15:53 +0200
Subject: [PATCH 03/15] Fix: Fixed Delete Button for FeatureModelTable

---
 .../src/components/FeatureModelTable.vue      | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index aea620ce..fddbdf7d 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -231,9 +231,12 @@ import FileCreate from '@/components/upload_cards/FileCreate.vue';
 import { useAuthStore } from '@/store/auth';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { useFileStore } from '@/store/file';
 
+const emit = defineEmits(['onDelete']);
 const router = useRouter();
 const authStore = useAuthStore();
+const fileStore = useFileStore();
 
 const props = defineProps({
     headline: {
@@ -283,47 +286,46 @@ const headers = [
         sortable: false,
     },
 ];
-const search = '';
-const removeLoading = false;
-const dialog = false;
+const search = ref('');
+const removeLoading = ref(false);
+const dialog = ref(false);
 const createDialog = ref(false);
-const dialogDelete = false;
+const dialogDelete = ref(false);
 const dialogAnalysis = false;
-
+const editedIndex = ref(-1);
+const editedItem = ref(null);
+const defaultItem = ref(undefined);
 const checkLocalStorage = computed(() => {
     return !!localStorage.featureModelData;
 });
 
 async function deleteItemConfirm() {
-    this.removeLoading = true;
-    /*await this.$store.dispatch(
-    'deleteFeatureModel',
-    this.editedItem.id
-  );
-  await this.$store.dispatch('fetchFiles');
-  this.$emit('onDelete');*/
-    this.removeLoading = false;
+    removeLoading.value = true;
+    await fileStore.deleteFeatureModel(
+    editedItem.value.value
+    );
+    await fileStore.fetchConfirmedFeatureModels();
+    emit('onDelete');
+    removeLoading.value = false;
 
-    this.closeDelete();
+    closeDelete();
 }
 function close() {
-    this.dialog = false;
+    dialog.value = false;
     /*this.$nextTick(() => {
     this.editedItem = Object.assign({}, this.defaultItem);
     this.editedIndex = -1;
   });*/
 }
 function closeDelete() {
-    this.dialogDelete = false;
-    /*this.$nextTick(() => {
-    this.editedItem = Object.assign({}, this.defaultItem);
-    this.editedIndex = -1;
-  });*/
+    dialogDelete.value = false;
+    editedItem.value = { ...defaultItem };
+    editedIndex.value = -1;
 }
 function deleteItem(item) {
-    this.editedIndex = this.items.indexOf(item);
-    this.editedItem = Object.assign({}, item);
-    this.dialogDelete = true;
+    editedIndex.value = item.index;
+    editedItem.value = { ...item };
+    dialogDelete.value = true;
 }
 function handleClick(value) {
     console.log(value);

From 38c786e3f8ce099539d2d15f81e5f709aa061d43 Mon Sep 17 00:00:00 2001
From: Sean Niklas Semmler <sean.semmler@uni-ulm.de>
Date: Mon, 28 Aug 2023 12:27:17 +0200
Subject: [PATCH 04/15] Fix: Fixed ActionButtons Eye and Play

---
 frontendVue3/src/components/FeatureModelTable.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index fddbdf7d..9d3324c7 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -156,6 +156,7 @@
                         variant="tonal"
                         size="small"
                         icon="mdi-play"
+                        @click="handleClick(item.raw)"
                     >
                     </v-btn>
                     <v-btn
@@ -174,7 +175,7 @@
                         variant="tonal"
                         icon="mdi-eye"
                         size="small"
-                        :to="'/feature-model/' + item.id"
+                        :to="'/feature-model/' + item.raw.id"
                     >
                     </v-btn>
                     <!-- <v-btn small rounded color="error" class="mr-2"> <v-icon>mdi-delete</v-icon></v-btn> -->

From 9c39f2a6045f93f2c3ebd74b7a1d6d0a24fb4cfd Mon Sep 17 00:00:00 2001
From: Sean Niklas Semmler <sean.semmler@uni-ulm.de>
Date: Mon, 28 Aug 2023 12:30:48 +0200
Subject: [PATCH 05/15] Refactor: Used item.raw, removed unnecassary functions
 and variables

---
 frontendVue3/src/components/FeatureModelTable.vue | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index 9d3324c7..0fe091de 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -293,7 +293,6 @@ const dialog = ref(false);
 const createDialog = ref(false);
 const dialogDelete = ref(false);
 const dialogAnalysis = false;
-const editedIndex = ref(-1);
 const editedItem = ref(null);
 const defaultItem = ref(undefined);
 const checkLocalStorage = computed(() => {
@@ -303,7 +302,7 @@ const checkLocalStorage = computed(() => {
 async function deleteItemConfirm() {
     removeLoading.value = true;
     await fileStore.deleteFeatureModel(
-    editedItem.value.value
+    editedItem.value.id
     );
     await fileStore.fetchConfirmedFeatureModels();
     emit('onDelete');
@@ -311,21 +310,12 @@ async function deleteItemConfirm() {
 
     closeDelete();
 }
-function close() {
-    dialog.value = false;
-    /*this.$nextTick(() => {
-    this.editedItem = Object.assign({}, this.defaultItem);
-    this.editedIndex = -1;
-  });*/
-}
 function closeDelete() {
     dialogDelete.value = false;
     editedItem.value = { ...defaultItem };
-    editedIndex.value = -1;
 }
 function deleteItem(item) {
-    editedIndex.value = item.index;
-    editedItem.value = { ...item };
+    editedItem.value = { ...item.raw };
     dialogDelete.value = true;
 }
 function handleClick(value) {

From 05b16e11e0a0d250a65f04208c064d9e9b2e40d0 Mon Sep 17 00:00:00 2001
From: Lukas Ostheimer <131896156+LukasOsti@users.noreply.github.com>
Date: Mon, 28 Aug 2023 17:36:37 +0200
Subject: [PATCH 06/15] feat: implemented function to color the features
 depending on service

---
 frontendVue3/src/classes/FeatureNode.js       |  6 ++-
 frontendVue3/src/classes/constants.js         |  6 +++
 .../FeatureModel/FeatureModelTree.vue         |  8 +++-
 .../FeatureModel/FeatureModelTreeToolbar.vue  |  7 +++-
 .../services/FeatureModel/count.service.js    |  2 +
 frontendVue3/src/views/FeatureModel.vue       | 40 ++++++++++++++++++-
 6 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/frontendVue3/src/classes/FeatureNode.js b/frontendVue3/src/classes/FeatureNode.js
index 81b807b4..6c10dedd 100644
--- a/frontendVue3/src/classes/FeatureNode.js
+++ b/frontendVue3/src/classes/FeatureNode.js
@@ -26,7 +26,7 @@ export class FeatureNode {
         }else{
             this.displayName= newName.slice(0, CONSTANTS.DISPLAY_NAME_RAW) + CONSTANTS.POINTS;
         }
-       
+
     }
     color() {
         if (this.markedAsEdited) {
@@ -86,6 +86,10 @@ export class FeatureNode {
         this.groupType = groupType;
     }
 
+    setColor(color) {
+        this.colorValue = color;
+    }
+
     uncollapse(toRoot = true) {
         if (this.isCollapsed && !this.isLeaf()) {
             this.d3Node.children = this.d3Node.collapsedChildren;
diff --git a/frontendVue3/src/classes/constants.js b/frontendVue3/src/classes/constants.js
index c6d8972f..793cac8f 100644
--- a/frontendVue3/src/classes/constants.js
+++ b/frontendVue3/src/classes/constants.js
@@ -48,6 +48,12 @@ export const NODE_COLOR = "rgb(204, 204, 255)";
 export const NODE_EDITED_COLOR = "rgb(197,196,120)";
 export const NODE_ABSTRACT_COLOR = "#ebebff";
 
+export const NODE_DEAD_COLOR = "rgb(255, 46, 46)";
+
+export const NODE_FALSEOP_COLOR = "rgb(255, 153, 51)";
+
+export const NODE_CORE_COLOR = "rgb(51, 51, 255)";
+
 export const DISPLAY_NAME_LENGTH = 8;
 export const DISPLAY_NAME_RAW= 5;
 export const POINTS = '...';
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
index 502d5fdc..6c7967c1 100644
--- a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
@@ -282,8 +282,12 @@ export default {
         },
 
         coloring(coloringIndex) {
-            this.d3Data.coloringIndex = coloringIndex;
-            update.updateSvg(this.d3Data);
+          this.d3Data.coloringIndex = coloringIndex;
+            if(coloringIndex === -1){
+              this.$emit("colors")
+            } else {
+              update.updateSvg(this.d3Data);
+            }
         },
 
         onChangeFoundNodeIndex(index) {
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
index c6dc86f8..a27c235f 100644
--- a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
@@ -126,7 +126,7 @@
                         <v-list-item
                             v-for="(item, i) in itemsColoring"
                             :key="i"
-                            @click="selectedColoring(item)"
+                            @click="selectedColoring(i)"
                         >
                             <v-list-item-content>
                                 <v-list-item-title
@@ -134,6 +134,11 @@
                                 ></v-list-item-title>
                             </v-list-item-content>
                         </v-list-item>
+                        <v-list-item
+                            v-if="isServiceAvailable"
+                            @click="selectedColoring(-1)"
+                        > Dead, Core and False Optional
+                        </v-list-item>
                     </v-list>
                 </v-menu>
 
diff --git a/frontendVue3/src/services/FeatureModel/count.service.js b/frontendVue3/src/services/FeatureModel/count.service.js
index c46a6551..4516da47 100644
--- a/frontendVue3/src/services/FeatureModel/count.service.js
+++ b/frontendVue3/src/services/FeatureModel/count.service.js
@@ -3,6 +3,8 @@ import * as CONSTANTS from '@/classes/constants'
 
 export function colorNodes(allNodes, coloringIndex) {
 	switch (coloringIndex) {
+    case -1:
+      break
 		case 0:
 			coloring(allNodes, countNodes)
 			break
diff --git a/frontendVue3/src/views/FeatureModel.vue b/frontendVue3/src/views/FeatureModel.vue
index a57bbbc5..e4d52594 100644
--- a/frontendVue3/src/views/FeatureModel.vue
+++ b/frontendVue3/src/views/FeatureModel.vue
@@ -22,6 +22,7 @@
                 showStartCollaborationSessionDialog = true
             "
             @show-claim-dialog="showClaimDialog"
+            @colors="getColors"
             @new-empty-model="newEmptyModel"
             @show-tutorial="showTutorial = true"
             @error-closed="errorClosed"
@@ -87,7 +88,7 @@ import { jsonToXML } from '@/services/xmlTranspiler.service';
 import CollaborationToolbar from '@/components/CollaborationToolbar';
 import CollaborationNameDialog from '@/components/CollaborationNameDialog';
 import CollaborationContinueEditingDialog from '@/components/CollaborationContinueEditingDialog';
-import { EXAMPLE_FEATURE_MODEL_XML } from '@/classes/constants';
+import { EXAMPLE_FEATURE_MODEL_XML, NODE_CORE_COLOR, NODE_DEAD_COLOR, NODE_FALSEOP_COLOR } from '@/classes/constants';
 import TutorialMode from '@/components/TutorialMode';
 import { NewEmptyModelCommand } from '@/classes/Commands/FeatureModel/NewEmptyModelCommand';
 import { SliceCommand } from "@/classes/Commands/FeatureModel/SliceCommand";
@@ -244,7 +245,7 @@ export default {
                 this.xml = jsonToXML(this.data);
                 const content = new TextEncoder().encode(this.xml);
                 let response = await axios.post(`${import.meta.env.VITE_APP_DOMAIN_FEATUREIDESERVICE}slice`, {
-                    name: "hello.xml",
+                    name: this.id + ".xml",
                     selection: [node.name],
                     content: Array.from(content)
                 });
@@ -283,6 +284,41 @@ export default {
             }
         },
 
+        async getColors() {
+            this.loadingData = true;
+            await this.checkService()
+            if (this.isServiceAvailable) {
+              try {
+                this.xml = jsonToXML(this.data);
+                const content = new TextEncoder().encode(this.xml);
+                let response = await axios.post(`${import.meta.env.VITE_APP_DOMAIN_FEATUREIDESERVICE}stats`, {
+                  name: this.id + ".xml",
+                  content: Array.from(content)
+                });
+                let deadFeatures = response.data.deadFeatures;
+                let falseOptionalFeatures = response.data.falseOptionalFeatures;
+                let coreFeatures = response.data.coreFeatures;
+
+                if (deadFeatures.length > 0) {
+                  this.$refs.featureModelTree.d3Data.root.descendants().find(node => deadFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_DEAD_COLOR));
+                }
+                if (falseOptionalFeatures.length > 0) {
+                  this.$refs.featureModelTree.d3Data.root.descendants().filter(node => falseOptionalFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_FALSEOP_COLOR));
+                }
+                if (coreFeatures.length > 0) {
+                  this.$refs.featureModelTree.d3Data.root.descendants().filter(node => coreFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_CORE_COLOR));
+                }
+                this.updateFeatureModel();
+              } catch (e) {
+                this.loadingData = false;
+              }
+            } else {
+                this.loadingData = false;
+                this.errorNew("FeatureIDE Service is not available to slice the feature.");
+            }
+            this.loadingData = false;
+        },
+
         newEmptyModel() {
             const command = new NewEmptyModelCommand(
                 this,

From ccf547ea7aa925a62819d5e6c0895538d10a43af Mon Sep 17 00:00:00 2001
From: Lukas Ostheimer <131896156+LukasOsti@users.noreply.github.com>
Date: Wed, 30 Aug 2023 16:32:35 +0200
Subject: [PATCH 07/15] feat: implement new color feature with service

---
 .../src/classes/Commands/CommandManager.js    |  3 ++
 .../FeatureModel/FeatureModelTree.vue         |  6 +---
 .../FeatureModel/FeatureModelTreeToolbar.vue  | 13 +++----
 .../FeatureModel/colorsFromService.service.js | 29 +++++++++++++++
 .../services/FeatureModel/count.service.js    |  9 ++---
 frontendVue3/src/views/FeatureModel.vue       | 36 -------------------
 6 files changed, 43 insertions(+), 53 deletions(-)
 create mode 100644 frontendVue3/src/services/FeatureModel/colorsFromService.service.js

diff --git a/frontendVue3/src/classes/Commands/CommandManager.js b/frontendVue3/src/classes/Commands/CommandManager.js
index 84f41fe8..f659598a 100644
--- a/frontendVue3/src/classes/Commands/CommandManager.js
+++ b/frontendVue3/src/classes/Commands/CommandManager.js
@@ -1,5 +1,6 @@
 import * as commandFactory from "@/classes/Commands/CommandFactory";
 import * as update from '@/services/FeatureModel/update.service.js';
+import { getColorsFromService } from '@/services/FeatureModel/colorsFromService.service';
 
 export class CommandManager {
     constructor() {
@@ -33,6 +34,8 @@ export class CommandManager {
 
         this.commandEvent();
 
+        getColorsFromService(this.collaborationManager.featureModel.data, this.d3Data)
+
         this.fadeOut(this.d3Data, command);
     }
 
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
index 6c7967c1..e0331dd4 100644
--- a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
@@ -283,11 +283,7 @@ export default {
 
         coloring(coloringIndex) {
           this.d3Data.coloringIndex = coloringIndex;
-            if(coloringIndex === -1){
-              this.$emit("colors")
-            } else {
-              update.updateSvg(this.d3Data);
-            }
+          update.updateSvg(this.d3Data);
         },
 
         onChangeFoundNodeIndex(index) {
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
index a27c235f..2c696c77 100644
--- a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
@@ -116,7 +116,7 @@
                     <v-list-item-title>Redo</v-list-item-title>
                 </v-list-item>
 
-                <v-menu offset-y :close-on-content-click="false">
+                <v-menu offset-y :close-on-content-click="false" v-model="isColorMenuOpened">
                     <template v-slot:activator="{ props }">
                         <v-list-item v-bind="props" prepend-icon="mdi-palette">
                             <v-list-item-title>Coloring</v-list-item-title>
@@ -134,11 +134,6 @@
                                 ></v-list-item-title>
                             </v-list-item-content>
                         </v-list-item>
-                        <v-list-item
-                            v-if="isServiceAvailable"
-                            @click="selectedColoring(-1)"
-                        > Dead, Core and False Optional
-                        </v-list-item>
                     </v-list>
                 </v-menu>
 
@@ -362,6 +357,7 @@ export default {
         drawer: true,
         discardChangesConfirmDialog: false,
         saveDialog: false,
+        isColorMenuOpened: false,
     }),
 
     watch: {
@@ -386,6 +382,11 @@ export default {
         quickEdit: function (newValue) {
             this.$emit('quickEdit', newValue);
         },
+        isColorMenuOpened: function(newValue) {
+          if(!newValue){
+            this.$emit('coloring', -1)
+          }
+        }
     },
 
     computed: {},
diff --git a/frontendVue3/src/services/FeatureModel/colorsFromService.service.js b/frontendVue3/src/services/FeatureModel/colorsFromService.service.js
new file mode 100644
index 00000000..a226e7c6
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/colorsFromService.service.js
@@ -0,0 +1,29 @@
+import { jsonToXML } from '@/services/xmlTranspiler.service';
+import axios from 'axios';
+import { NODE_CORE_COLOR, NODE_DEAD_COLOR, NODE_FALSEOP_COLOR } from '@/classes/constants';
+
+export async function getColorsFromService(featureModel, d3Data) {
+    try {
+        const content = new TextEncoder().encode(jsonToXML(featureModel));
+        let response = await axios.post(`${import.meta.env.VITE_APP_DOMAIN_FEATUREIDESERVICE}stats`, {
+          name: featureModel.id + ".xml",
+          content: Array.from(content)
+        });
+        let deadFeatures = response.data.deadFeatures;
+        let falseOptionalFeatures = response.data.falseOptionalFeatures;
+        let coreFeatures = response.data.coreFeatures;
+
+        if (coreFeatures.length > 0) {
+            d3Data.root.descendants().filter(node => coreFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_CORE_COLOR));
+        }
+        if (deadFeatures.length > 0) {
+            d3Data.root.descendants().filter(node => deadFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_DEAD_COLOR));
+        }
+        if (falseOptionalFeatures.length > 0) {
+            d3Data.root.descendants().filter(node => falseOptionalFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_FALSEOP_COLOR));
+        }
+
+    } catch (e) {
+      console.log(e)
+    }
+}
diff --git a/frontendVue3/src/services/FeatureModel/count.service.js b/frontendVue3/src/services/FeatureModel/count.service.js
index 4516da47..dbe72808 100644
--- a/frontendVue3/src/services/FeatureModel/count.service.js
+++ b/frontendVue3/src/services/FeatureModel/count.service.js
@@ -3,10 +3,8 @@ import * as CONSTANTS from '@/classes/constants'
 
 export function colorNodes(allNodes, coloringIndex) {
 	switch (coloringIndex) {
-    case -1:
-      break
 		case 0:
-			coloring(allNodes, countNodes)
+			resetColorNodes(allNodes)
 			break
 		case 1:
 			coloring(allNodes, countDirectChildren)
@@ -15,7 +13,6 @@ export function colorNodes(allNodes, coloringIndex) {
 			coloring(allNodes, countTotalChildren)
 			break
 		default:
-			resetColorNodes(allNodes)
 			break
 	}
 }
@@ -45,7 +42,7 @@ function coloring(allNodes, coloringFunction) {
 /**
  * Counts all nodes
  * @returns {max: number, count: {}}
- */
+
 function countNodes(allNodes) {
 	let count = {}
 	let max = 0
@@ -60,7 +57,7 @@ function countNodes(allNodes) {
 	}
 
 	return { count: count, max: max }
-}
+}*/
 
 function countDirectChildren(allNodes) {
 	let count = {}
diff --git a/frontendVue3/src/views/FeatureModel.vue b/frontendVue3/src/views/FeatureModel.vue
index e4d52594..af8939b1 100644
--- a/frontendVue3/src/views/FeatureModel.vue
+++ b/frontendVue3/src/views/FeatureModel.vue
@@ -22,7 +22,6 @@
                 showStartCollaborationSessionDialog = true
             "
             @show-claim-dialog="showClaimDialog"
-            @colors="getColors"
             @new-empty-model="newEmptyModel"
             @show-tutorial="showTutorial = true"
             @error-closed="errorClosed"
@@ -284,41 +283,6 @@ export default {
             }
         },
 
-        async getColors() {
-            this.loadingData = true;
-            await this.checkService()
-            if (this.isServiceAvailable) {
-              try {
-                this.xml = jsonToXML(this.data);
-                const content = new TextEncoder().encode(this.xml);
-                let response = await axios.post(`${import.meta.env.VITE_APP_DOMAIN_FEATUREIDESERVICE}stats`, {
-                  name: this.id + ".xml",
-                  content: Array.from(content)
-                });
-                let deadFeatures = response.data.deadFeatures;
-                let falseOptionalFeatures = response.data.falseOptionalFeatures;
-                let coreFeatures = response.data.coreFeatures;
-
-                if (deadFeatures.length > 0) {
-                  this.$refs.featureModelTree.d3Data.root.descendants().find(node => deadFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_DEAD_COLOR));
-                }
-                if (falseOptionalFeatures.length > 0) {
-                  this.$refs.featureModelTree.d3Data.root.descendants().filter(node => falseOptionalFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_FALSEOP_COLOR));
-                }
-                if (coreFeatures.length > 0) {
-                  this.$refs.featureModelTree.d3Data.root.descendants().filter(node => coreFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_CORE_COLOR));
-                }
-                this.updateFeatureModel();
-              } catch (e) {
-                this.loadingData = false;
-              }
-            } else {
-                this.loadingData = false;
-                this.errorNew("FeatureIDE Service is not available to slice the feature.");
-            }
-            this.loadingData = false;
-        },
-
         newEmptyModel() {
             const command = new NewEmptyModelCommand(
                 this,

From 8d7a8ab5eeb4f1e746f5d4a3bbbbe71a2fb370c0 Mon Sep 17 00:00:00 2001
From: Lukas Ostheimer <131896156+LukasOsti@users.noreply.github.com>
Date: Wed, 30 Aug 2023 17:19:00 +0200
Subject: [PATCH 08/15] feat: finished the colors service and colors reload
 after every command

---
 .../src/classes/Commands/CommandManager.js    | 34 +++++++++++++++----
 .../src/classes/Commands/ReloadCommand.js     | 10 ++++++
 .../FeatureModel/FeatureModelTree.vue         |  2 ++
 .../FeatureModel/colorsFromService.service.js |  8 ++++-
 frontendVue3/src/views/FeatureModel.vue       |  7 +++-
 5 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 frontendVue3/src/classes/Commands/ReloadCommand.js

diff --git a/frontendVue3/src/classes/Commands/CommandManager.js b/frontendVue3/src/classes/Commands/CommandManager.js
index f659598a..335f93b7 100644
--- a/frontendVue3/src/classes/Commands/CommandManager.js
+++ b/frontendVue3/src/classes/Commands/CommandManager.js
@@ -1,6 +1,7 @@
 import * as commandFactory from "@/classes/Commands/CommandFactory";
 import * as update from '@/services/FeatureModel/update.service.js';
 import { getColorsFromService } from '@/services/FeatureModel/colorsFromService.service';
+import { ReloadCommand } from '@/classes/Commands/ReloadCommand';
 
 export class CommandManager {
     constructor() {
@@ -13,6 +14,10 @@ export class CommandManager {
         this.d3Data = null;
     }
 
+    executeReload(){
+      this.fadeOut(this.d3Data, new ReloadCommand());
+    }
+
     execute(command, initiator = true) {
         if (initiator && this.collaborationManager) {
             this.collaborationManager.send(this.type, 'execute', command.createDTO());
@@ -34,8 +39,6 @@ export class CommandManager {
 
         this.commandEvent();
 
-        getColorsFromService(this.collaborationManager.featureModel.data, this.d3Data)
-
         this.fadeOut(this.d3Data, command);
     }
 
@@ -114,10 +117,27 @@ export class CommandManager {
     }
 
     fadeOut(d3Data, command) {
-        // Rerender for edits and fade them out
-        setTimeout(() => {
-            command.unmarkChanges();
-            update.updateSvg(d3Data);
-        }, 5000);
+        if(command instanceof ReloadCommand){
+            getColorsFromService(this.collaborationManager.featureModel.data, this.d3Data);
+            // Rerender for edits and fade them out
+            setTimeout(() => {
+                command.unmarkChanges();
+                update.updateSvg(d3Data);
+            }, 500);
+        } else if(this.type !== 'constraint') {
+            getColorsFromService(this.collaborationManager.featureModel.data, this.d3Data);
+            // Rerender for edits and fade them out
+            setTimeout(() => {
+                command.unmarkChanges();
+                update.updateSvg(d3Data);
+            }, 3000);
+        } else {
+            getColorsFromService(this.collaborationManager.featureModel.data, this.collaborationManager.featureModelCommandManager.d3Data);
+            // Rerender for edits and fade them out
+            setTimeout(() => {
+                command.unmarkChanges();
+                update.updateSvg(this.collaborationManager.featureModelCommandManager.d3Data);
+            }, 500);
+        }
     }
 }
diff --git a/frontendVue3/src/classes/Commands/ReloadCommand.js b/frontendVue3/src/classes/Commands/ReloadCommand.js
new file mode 100644
index 00000000..8fa98533
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/ReloadCommand.js
@@ -0,0 +1,10 @@
+import { Command } from '@/classes/Commands/Command';
+
+export class ReloadCommand extends Command {
+
+    execute() {
+    }
+
+    undo() {
+    }
+}
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
index e0331dd4..f8eded98 100644
--- a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
@@ -273,6 +273,7 @@ export default {
             this.rootNode,
             this.constraints
         );
+        this.commandManager.executeReload();
         update.updateSvg(this.d3Data);
     },
 
@@ -283,6 +284,7 @@ export default {
 
         coloring(coloringIndex) {
           this.d3Data.coloringIndex = coloringIndex;
+          this.commandManager.executeReload();
           update.updateSvg(this.d3Data);
         },
 
diff --git a/frontendVue3/src/services/FeatureModel/colorsFromService.service.js b/frontendVue3/src/services/FeatureModel/colorsFromService.service.js
index a226e7c6..23f13ee8 100644
--- a/frontendVue3/src/services/FeatureModel/colorsFromService.service.js
+++ b/frontendVue3/src/services/FeatureModel/colorsFromService.service.js
@@ -1,6 +1,7 @@
 import { jsonToXML } from '@/services/xmlTranspiler.service';
 import axios from 'axios';
 import { NODE_CORE_COLOR, NODE_DEAD_COLOR, NODE_FALSEOP_COLOR } from '@/classes/constants';
+import { useAppStore } from '@/store/app';
 
 export async function getColorsFromService(featureModel, d3Data) {
     try {
@@ -24,6 +25,11 @@ export async function getColorsFromService(featureModel, d3Data) {
         }
 
     } catch (e) {
-      console.log(e)
+        const appStore = useAppStore()
+        appStore.updateSnackbar(
+          'Could not detect any special cases, because Service is down.',
+          'error',
+          3000,
+          true)
     }
 }
diff --git a/frontendVue3/src/views/FeatureModel.vue b/frontendVue3/src/views/FeatureModel.vue
index af8939b1..00e3e9f2 100644
--- a/frontendVue3/src/views/FeatureModel.vue
+++ b/frontendVue3/src/views/FeatureModel.vue
@@ -269,7 +269,12 @@ export default {
                 this.updateFeatureModel();
             } else {
                 this.loadingData = false;
-                this.errorNew("FeatureIDE Service is not available to slice the feature.");
+                appStore.updateSnackbar(
+              'Could not slice the Feature, because Service is down.',
+              'error',
+              3000,
+              true
+                )
             }
             this.loadingData = false;
         },

From 2d13a7aefaf0d5ea5692f09c54e4b55edc5e6a85 Mon Sep 17 00:00:00 2001
From: Lukas Ostheimer <131896156+LukasOsti@users.noreply.github.com>
Date: Thu, 31 Aug 2023 11:26:14 +0200
Subject: [PATCH 09/15] feat: merged new release into branch before merging to
 fix issues

---
 frontendVue3/src/App.vue                      |   2 +-
 .../src/classes/CollaborationManager.js       |  22 +--
 .../src/classes/Commands/CommandFactory.js    |   9 +-
 .../Commands/Constraints/EditCommand.js       |   2 +
 .../Commands/FeatureModel/SliceCommand.js     |  26 +++-
 frontendVue3/src/classes/FeatureNode.js       |   2 +-
 .../CollaborationContinueEditingDialog.vue    |   4 +-
 .../src/components/CollaborationToolbar.vue   | 129 ++++++++++--------
 frontendVue3/src/components/Constraints.vue   |  32 +++--
 .../FeatureModel/FeatureModelTree.vue         |   1 -
 .../FeatureModel/FeatureModelTreeToolbar.vue  |   5 +-
 frontendVue3/src/router/index.js              |  14 +-
 frontendVue3/src/views/FeatureModel.vue       | 109 ++++++++++-----
 13 files changed, 230 insertions(+), 127 deletions(-)

diff --git a/frontendVue3/src/App.vue b/frontendVue3/src/App.vue
index b4a89896..757a8cc7 100644
--- a/frontendVue3/src/App.vue
+++ b/frontendVue3/src/App.vue
@@ -2,7 +2,7 @@
     <v-app>
         <navbar></navbar>
         <v-main style="position: relative">
-            <router-view />
+            <router-view :key="$route.fullPath" />
             <v-snackbar
                 location="bottom"
                 v-model="snackbar.show"
diff --git a/frontendVue3/src/classes/CollaborationManager.js b/frontendVue3/src/classes/CollaborationManager.js
index eca0365e..96008672 100644
--- a/frontendVue3/src/classes/CollaborationManager.js
+++ b/frontendVue3/src/classes/CollaborationManager.js
@@ -4,6 +4,7 @@ import beautify from "xml-beautifier";
 import {xmlToJson} from "@/services/xmlTranspiler.service";
 import {Peer} from "peerjs";
 import {animals, colors, uniqueNamesGenerator} from 'unique-names-generator';
+import { useAppStore } from '@/store/app';
 
 export default class CollaborationManager {
     constructor(featureModelCommandManager, constraintCommandManager, featureModel) {
@@ -18,8 +19,8 @@ export default class CollaborationManager {
 
         this.connections = [];
         this.options = {
-            host: process.env.VUE_APP_DOMAIN_WEBSOCKET,
-            port: process.env.VUE_APP_DOMAIN_WEBSOCKET_PORT,
+            host: import.meta.env.VITE_APP_DOMAIN_WEBSOCKET,
+            port: import.meta.env.VITE_APP_DOMAIN_WEBSOCKET_PORT,
             path: "/myapp",
             pingInterval: 5000,
             debug: 0,
@@ -43,6 +44,7 @@ export default class CollaborationManager {
         // List of all clients inclusive host with { id, name }
         this.members = [];
         this.editorId = null;
+        this.appStore = useAppStore();
     }
 
     createCollaboration() {
@@ -176,6 +178,7 @@ export default class CollaborationManager {
             historyCommands: data.constraintHistoryCommands,
             futureCommands: data.constraintFutureCommands,
         };
+        this.constraintCommandManager.executeRemoteCommands(this.featureModel.data.rootNode, this.featureModel.data.constraints)
     }
 
     receiveClose() {
@@ -243,7 +246,6 @@ export default class CollaborationManager {
             action: action,
             data: data,
         };
-
         this.connections.forEach(conn => conn.send(toSend));
     }
 
@@ -263,7 +265,7 @@ export default class CollaborationManager {
             data: data,
         };
 
-        this.connections.filter(conn => conn !== excluded).forEach(conn => conn.send(toSend));
+        this.connections.filter(conn => conn.peer !== excluded.peer).forEach(conn => conn.send(toSend));
     }
 
     sendInitData(connection) {
@@ -329,12 +331,12 @@ export default class CollaborationManager {
     }
 
     showSnackbarMessage(message, variant = 'success') {
-        this.featureModel.$store.commit("updateSnackbar", {
-            message: message,
-            variant: variant,
-            timeout: 5000,
-            show: true,
-        });
+        this.appStore.updateSnackbar(
+          message,
+          variant,
+          5000,
+          true,
+        );
     }
 
     getClaimerName() {
diff --git a/frontendVue3/src/classes/Commands/CommandFactory.js b/frontendVue3/src/classes/Commands/CommandFactory.js
index 7a0e71c2..c47cc01a 100644
--- a/frontendVue3/src/classes/Commands/CommandFactory.js
+++ b/frontendVue3/src/classes/Commands/CommandFactory.js
@@ -6,6 +6,8 @@ import {EditCommand} from "@/classes/Commands/FeatureModel/EditCommand";
 import {SwapCommand} from "@/classes/Commands/FeatureModel/SwapCommand";
 import {parse} from "@/services/booleanExpressionParser.service";
 import {NewEmptyModelCommand} from "@/classes/Commands/FeatureModel/NewEmptyModelCommand";
+import { RemoveCommand } from '@/classes/Commands/FeatureModel/RemoveCommand';
+import { SliceCommand } from '@/classes/Commands/FeatureModel/SliceCommand';
 
 export function create(rootNode, allConstraints, type, data, featureModelComponent) {
     if (type === 'featureModel') {
@@ -21,6 +23,11 @@ export function create(rootNode, allConstraints, type, data, featureModelCompone
             return new SwapCommand(node, dstParent, data.dstIndex);
         } else if (data.commandType === 'new-empty-model') {
             return new NewEmptyModelCommand(featureModelComponent);
+        } else if (data.commandType === 'remove') {
+            const node = rootNode.descendants().find(node => node.name === data.nodeName);
+            return new RemoveCommand(node, data.dstIndex);
+        } else if (data.commandType === 'slice-model') {
+            return new SliceCommand(featureModelComponent, data.newXML);
         }
     } else {
         if (data.commandType === 'add') {
@@ -35,4 +42,4 @@ export function create(rootNode, allConstraints, type, data, featureModelCompone
             return new constraint_edit.EditCommand(allConstraints, constraint, newConstraintItem);
         }
     }
-}
\ No newline at end of file
+}
diff --git a/frontendVue3/src/classes/Commands/Constraints/EditCommand.js b/frontendVue3/src/classes/Commands/Constraints/EditCommand.js
index 4614bf44..b8ec3da1 100644
--- a/frontendVue3/src/classes/Commands/Constraints/EditCommand.js
+++ b/frontendVue3/src/classes/Commands/Constraints/EditCommand.js
@@ -9,11 +9,13 @@ export class EditCommand extends ConstraintCommand {
     }
 
     execute() {
+        this.constraint.rule.removeConstraint();  // Remove Constraints on  outdatet FeaturenodeConstraintItems
         this.constraint.rule = this.newConstraintItem;
         this.constraint.rule.setConstraint(this.constraint);
     }
 
     undo() {
+        this.constraint.rule.removeConstraint(); // Remove Constraints on  outdatet FeaturenodeConstraintItems
         this.constraint.rule = this.oldConstraintItem;
         this.constraint.rule.setConstraint(this.constraint);
     }
diff --git a/frontendVue3/src/classes/Commands/FeatureModel/SliceCommand.js b/frontendVue3/src/classes/Commands/FeatureModel/SliceCommand.js
index e8197b5c..ba2651f4 100644
--- a/frontendVue3/src/classes/Commands/FeatureModel/SliceCommand.js
+++ b/frontendVue3/src/classes/Commands/FeatureModel/SliceCommand.js
@@ -1,9 +1,22 @@
 import {Command} from "@/classes/Commands/Command";
 import * as init from '@/services/FeatureModel/init.service.js';
+import { FeatureNode } from '@/classes/FeatureNode';
+import * as xmlTranspiler from '@/services/xmlTranspiler.service';
 
 export class SliceCommand extends Command {
-    constructor(oldFM, newFM) {
+    constructor(oldFM, newXml) {
         super();
+        let newData = {
+            featureMap: [],
+            constraints: [],
+            properties: [],
+            calculations: undefined,
+            comments: [],
+            featureOrder: undefined,
+            rootNode: new FeatureNode(null, 'Root', 'and', false, false),
+        };
+        this.xml = newXml;
+        xmlTranspiler.xmlToJson(newXml, newData);
         this.featureModelComponent = oldFM;
         this.d3Data = this.featureModelComponent.$refs.featureModelTree.d3Data;
 
@@ -15,16 +28,24 @@ export class SliceCommand extends Command {
         this.oldRoot = this.d3Data.root;
 
         this.oldData = this.featureModelComponent.data;
-        this.newData = newFM;
+        this.newData = newData;
     }
 
     execute() {
+        // Constraint command manager
+        this.constraintCommandManager.historyCommands = [];
+        this.constraintCommandManager.futureCommands = [];
+
         this.featureModelComponent.data = this.newData;
         init.initData(this.d3Data, this.newData.rootNode);
     }
 
 
     undo() {
+        // Constraint command manager
+        this.constraintCommandManager.historyCommands = this.historyCommands;
+        this.constraintCommandManager.futureCommands = this.futureCommands;
+
         this.featureModelComponent.data = this.oldData;
         this.d3Data.root = this.oldRoot;
     }
@@ -32,6 +53,7 @@ export class SliceCommand extends Command {
     createDTO() {
         return {
             commandType: 'slice-model',
+            newXML: this.xml
         };
     }
 }
diff --git a/frontendVue3/src/classes/FeatureNode.js b/frontendVue3/src/classes/FeatureNode.js
index 6c10dedd..244c0734 100644
--- a/frontendVue3/src/classes/FeatureNode.js
+++ b/frontendVue3/src/classes/FeatureNode.js
@@ -237,7 +237,7 @@ export class FeatureNode {
         rightSiblings.forEach(node => node.isHidden = false);
 
         const index = this.parent.d3Node.children.indexOf(this.d3Node);
-        const leftD3Siblings = this.parent.d3Node.children.slice(index + 1);
+        const leftD3Siblings = this.parent.d3Node.children.slice(0,index);
         const rightD3Siblings = rightSiblings.map(node => node.d3Node);
         this.parent.d3Node.children = [...leftD3Siblings, this.d3Node, ...rightD3Siblings];
     }
diff --git a/frontendVue3/src/components/CollaborationContinueEditingDialog.vue b/frontendVue3/src/components/CollaborationContinueEditingDialog.vue
index 3133c47c..2c3a21b5 100644
--- a/frontendVue3/src/components/CollaborationContinueEditingDialog.vue
+++ b/frontendVue3/src/components/CollaborationContinueEditingDialog.vue
@@ -6,8 +6,8 @@
             </v-card-title>
             <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn text color="error" @click="$emit('close')">Close</v-btn>
-                <v-btn text color="primary" @click="$emit('continue-editing')"
+                <v-btn variant="text" color="error" @click="$emit('close')">Close</v-btn>
+                <v-btn variant="text" color="primary" @click="$emit('continue-editing')"
                     >Continue editing</v-btn
                 >
             </v-card-actions>
diff --git a/frontendVue3/src/components/CollaborationToolbar.vue b/frontendVue3/src/components/CollaborationToolbar.vue
index 08c9661d..78159bc1 100644
--- a/frontendVue3/src/components/CollaborationToolbar.vue
+++ b/frontendVue3/src/components/CollaborationToolbar.vue
@@ -1,46 +1,44 @@
 <template>
-    <div
+    <div class='justify-center'
         :style="
-            $vuetify.breakpoint.smAndDown
-                ? 'position: absolute; top: 0; left: 5rem; width: inherit'
-                : ''
+            smAndDown
+                ? 'position: absolute; top: 85px; left: 5rem; width: inherit; transform: translate(0%, -50%)'
+                : 'position: absolute; top: 85px; width: inherit; left: 50%; transform: translate(-50%, -50%)'
         "
     >
         <v-row
             class="mt-2"
-            :justify="$vuetify.breakpoint.smAndDown ? 'start' : 'center'"
+            :justify="smAndDown ? 'start' : 'center'"
             align="center"
         >
             <v-btn
-                v-if="$vuetify.breakpoint.mdAndDown"
+                v-if="smAndDown || !fab"
                 @click="fab = !fab"
-                color="primary"
-                dark
+                style="background-color: rgb(var(--v-theme-primary))"
+                theme="dark"
                 small
-                fab
-                class="mr-2"
+                class="mr-2 mt-2"
             >
                 <v-icon v-if="fab"> mdi-close </v-icon>
                 <v-icon v-else> mdi-account-multiple </v-icon>
             </v-btn>
             <v-slide-x-transition>
                 <v-toolbar
-                    v-show="fab || $vuetify.breakpoint.mdAndUp"
-                    :absolute="!$vuetify.breakpoint.smAndDown"
-                    class="rounded-pill"
-                    :class="$vuetify.breakpoint.smAndDown ? '' : 'mt-2'"
+                    dense
+                    v-show="fab"
+                    class="rounded-pill mt-2"
                     elevation="9"
                     height="auto"
-                    style="border: 2px solid white"
+                    style="border: 2px solid white; width: inherit"
                 >
                     <div
                         :style="
-                            $vuetify.breakpoint.smAndDown
+                            smAndDown
                                 ? 'max-width: 20vw'
                                 : 'max-width: 45vw'
                         "
                     >
-                        <v-chip-group disabled="true" mandatory>
+                        <v-chip-group :disabled="true" mandatory class="ml-2 flex-nowrap" :column="false">
                             <v-chip
                                 :class="
                                     collaborationManager.isClient
@@ -49,6 +47,8 @@
                                 "
                                 color="primary"
                                 :disabled="collaborationManager.isClient"
+                                theme="dark"
+                                style="background-color: rgb(var(--v-theme-primary))"
                                 @click="
                                     collaborationManager.sendMemberData(
                                         collaborationManager.peer._id
@@ -76,6 +76,9 @@
                                 :color="
                                     member.name === 'Host' ? 'success' : 'none'
                                 "
+                                theme="dark"
+                                :style="collaborationManager.editorId ===
+                                        member.id ? 'background-color: rgb(var(--v-theme-success))' : ''"
                                 :disabled="collaborationManager.isClient"
                                 @click="
                                     collaborationManager.sendMemberData(
@@ -104,26 +107,23 @@
                         "
                         bottom
                     >
-                        <template v-slot:activator="{ on, attrs }">
+                        <template v-slot:activator="{ props }">
                             <v-btn
-                                icon
-                                v-bind="attrs"
-                                v-on="on"
+                                icon="mdi-account-edit"
+                                v-bind="props"
                                 :disabled="claimButtonClickDisabled"
                                 @click="claimEditRights()"
                             >
-                                <v-icon>mdi-account-edit</v-icon>
                             </v-btn>
                         </template>
                         <span>Claim edit rights</span>
                     </v-tooltip>
 
                     <v-tooltip v-if="collaborationManager.isHost" bottom>
-                        <template v-slot:activator="{ on, attrs }">
+                        <template v-slot:activator="{ props }">
                             <v-btn
-                                icon
-                                v-bind="attrs"
-                                v-on="on"
+                                icon="mdi-account-cancel"
+                                v-bind="props"
                                 :color="
                                     collaborationManager.blockEditRequests
                                         ? 'primary'
@@ -131,50 +131,43 @@
                                 "
                                 @click="blockEditRequests"
                             >
-                                <v-icon>mdi-account-cancel</v-icon>
                             </v-btn>
                         </template>
                         <span>Block edit claims</span>
                     </v-tooltip>
 
                     <v-tooltip v-if="collaborationManager.isHost" bottom>
-                        <template v-slot:activator="{ on, attrs }">
+                        <template v-slot:activator="{ props }">
                             <v-btn
-                                icon
-                                v-bind="attrs"
+                                icon="mdi-qrcode"
+                                v-bind="props"
                                 @click="showQrCode = true"
-                                v-on="on"
                             >
-                                <v-icon>mdi-qrcode</v-icon>
                             </v-btn>
                         </template>
                         <span>Show qr code</span>
                     </v-tooltip>
 
                     <v-tooltip v-if="collaborationManager.isHost" bottom>
-                        <template v-slot:activator="{ on, attrs }">
+                        <template v-slot:activator="{ props }">
                             <v-btn
-                                icon
-                                v-bind="attrs"
+                                icon="mdi-content-copy"
+                                v-bind="props"
                                 @click="copyLink"
-                                v-on="on"
                             >
-                                <v-icon>mdi-content-copy</v-icon>
                             </v-btn>
                         </template>
                         <span>Copy invitation link</span>
                     </v-tooltip>
 
                     <v-tooltip bottom>
-                        <template v-slot:activator="{ on, attrs }">
+                        <template v-slot:activator="{ props }">
                             <v-btn
                                 color="red"
-                                icon
-                                v-bind="attrs"
+                                icon="mdi-close"
+                                v-bind="props"
                                 @click="showCloseDialog = true"
-                                v-on="on"
                             >
-                                <v-icon>mdi-close</v-icon>
                             </v-btn>
                         </template>
                         <span v-if="collaborationManager.isHost"
@@ -205,7 +198,7 @@
         </v-dialog>
 
         <!-- Close/Leave dialog -->
-        <!--        <v-dialog v-model="showCloseDialog" width="auto">
+        <v-dialog v-model="showCloseDialog" width="auto">
             <v-card>
                 <v-card-title class="text-h5" v-if="collaborationManager.isHost"
                     >Do you really want to close the collaboration session?
@@ -216,29 +209,29 @@
                 >
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn color="error" text @click="showCloseDialog = false"
+                    <v-btn color="error" variant="text" @click="showCloseDialog = false"
                         >Cancel</v-btn
                     >
                     <v-btn
                         v-if="collaborationManager.isHost"
                         color="primary"
-                        text
+                        variant="text"
                         @click="collaborationManager.closeCollaboration()"
                         >Close
                     </v-btn>
                     <v-btn
                         v-else
                         color="primary"
-                        text
+                        variant="text"
                         @click="collaborationManager.closeCollaboration()"
                         >Leave</v-btn
                     >
                 </v-card-actions>
             </v-card>
-        </v-dialog>-->
+        </v-dialog>
 
         <!-- Claim dialog that is only visible for host -->
-        <!--        <v-dialog v-model="showClaimDialog" persistent width="auto">
+        <v-dialog v-model="showClaimDialogWindow" persistent width="auto">
             <v-card>
                 <v-card-title
                     >"{{ collaborationManager.getClaimerName() }}" wants to
@@ -248,7 +241,7 @@
                     <v-spacer></v-spacer>
                     <v-btn
                         color="error"
-                        text
+                        variant="text"
                         @click="
                             collaborationManager.sendClaimEditRightsResponse(
                                 false
@@ -260,7 +253,7 @@
 
                     <v-btn
                         color="primary"
-                        text
+                        variant="text"
                         @click="
                             collaborationManager.sendClaimEditRightsResponse(
                                 true
@@ -271,12 +264,21 @@
                     </v-btn>
                 </v-card-actions>
             </v-card>
-        </v-dialog>-->
+        </v-dialog>
     </div>
 </template>
 
+<script setup>
+  import { useDisplay } from 'vuetify'
+
+  const { smAndDown, mdAndDown } = useDisplay()
+</script>
+
 <script>
 import QrcodeVue from 'qrcode.vue';
+import { useAppStore } from '@/store/app';
+
+const appStore = useAppStore();
 
 export default {
     name: 'CollaborationToolbar',
@@ -297,19 +299,30 @@ export default {
         fab: true,
     }),
 
+    computed: {
+      showClaimDialogWindow: {
+            get() {
+                return this.showClaimDialog;
+            },
+        },
+    },
+
     methods: {
+
+
+
         link() {
-            return `${process.env.VUE_APP_DOMAIN_FRONTEND}collaboration/${this.collaborationManager.collaborationKey}`;
+            return `${import.meta.env.VITE_APP_DOMAIN_FRONTEND}collaboration/${this.collaborationManager.collaborationKey}`;
         },
 
         copyLink() {
             navigator.clipboard.writeText(this.link());
-            this.$store.commit('updateSnackbar', {
-                message: 'Link copied',
-                variant: 'success',
-                timeout: 5000,
-                show: true,
-            });
+            appStore.updateSnackbar(
+                'Link copied',
+                'success',
+                5000,
+                true,
+            );
         },
 
         claimEditRights() {
diff --git a/frontendVue3/src/components/Constraints.vue b/frontendVue3/src/components/Constraints.vue
index 9f86a297..a457ebb2 100644
--- a/frontendVue3/src/components/Constraints.vue
+++ b/frontendVue3/src/components/Constraints.vue
@@ -70,7 +70,7 @@
                 </div>
             </template>
 
-            <template v-slot:item.formula="{ item }">          
+            <template v-slot:item.formula="{ item }">
                 <v-chip
                     :color="item.raw.constraint.color"
                     @click="highlightConstraint(item.raw)"
@@ -80,19 +80,20 @@
             </template>
 
             <template v-slot:item.actions="{ item }">
-                <v-icon
-                    class="mr-6"
+                <v-btn
+                    icon="mdi-pencil"
+                    variant="text"
                     @click="openAddEditDialog('Edit', item.raw.constraint)"
                     :disabled="!editRights"
                 >
-                    mdi-pencil
-                </v-icon>
-                <v-icon
+                </v-btn>
+                <v-btn
+                    icon="mdi-delete"
+                    variant="text"
                     @click="deleteConstraint(item.raw.constraint)"
                     :disabled="!editRights"
                 >
-                    mdi-delete
-                </v-icon>
+                </v-btn>
             </template>
         </v-data-table>
     </v-bottom-sheet>
@@ -104,6 +105,10 @@ import { AddCommand } from '@/classes/Commands/Constraints/AddCommand';
 import { CommandManager } from '@/classes/Commands/CommandManager';
 import { EditCommand } from '@/classes/Commands/Constraints/EditCommand';
 import { DeleteCommand } from '@/classes/Commands/Constraints/DeleteCommand';
+import * as init from '@/services/FeatureModel/init.service';
+import * as dragAndDrop from '@/services/FeatureModel/dragAndDrop.service';
+import * as view from '@/services/FeatureModel/view.service';
+import * as update from '@/services/FeatureModel/update.service';
 
 export default {
     name: 'Constraints',
@@ -124,7 +129,7 @@ export default {
         headers: [
             { title: 'Constraint', key: 'formula', width: '50%' },
             { title: 'Actions', key: 'actions', width: '50%' },
-        ], 
+        ],
         search: '',
         showAddEditDialog: false,
         modeAddEdit: undefined,
@@ -132,7 +137,7 @@ export default {
         updateKey: 0,
     }),
 
-    computed: {
+  computed: {
         isOpenDialog: {
             get() {
                 return this.isOpen;
@@ -173,11 +178,16 @@ export default {
             }
             this.closeAddEditDialog();
             this.commandManager.execute(command);
+            this.$emit('update-feature-model');
         },
 
         deleteConstraint(constraint) {
+            if(constraint.isHighlighted){ //reset highlight to free up color
+                constraint.toggleHighlighted();
+            }
             const command = new DeleteCommand(this.constraints, constraint);
             this.commandManager.execute(command);
+            this.$emit('update-feature-model');
         },
 
         openAddEditDialog(mode, constraint) {
@@ -193,10 +203,12 @@ export default {
 
         undo() {
             this.commandManager.undo();
+            this.$emit('update-feature-model');
         },
 
         redo() {
             this.commandManager.redo();
+            this.$emit('update-feature-model');
         },
     },
 
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
index f8eded98..8a62c4bb 100644
--- a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
@@ -260,7 +260,6 @@ export default {
         },
         smAndDown: useDisplay().smAndDown,
     }),
-
     mounted() {
         this.d3Data.featureModelTree = this;
 
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
index 2c696c77..57000074 100644
--- a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
@@ -128,11 +128,8 @@
                             :key="i"
                             @click="selectedColoring(i)"
                         >
-                            <v-list-item-content>
                                 <v-list-item-title
-                                    v-text="item"
-                                ></v-list-item-title>
-                            </v-list-item-content>
+                                >{{item}}</v-list-item-title>
                         </v-list-item>
                     </v-list>
                 </v-menu>
diff --git a/frontendVue3/src/router/index.js b/frontendVue3/src/router/index.js
index 9df9c71b..f003fcef 100644
--- a/frontendVue3/src/router/index.js
+++ b/frontendVue3/src/router/index.js
@@ -45,6 +45,18 @@ const routes = [
         name: 'FeatureModel',
         props: true,
         component: () => import('@/views/FeatureModel.vue'),
+        meta: {
+            title: 'Feature Model Viewer',
+        },
+    },
+    {
+        path: '/collaboration/:collaborationKey',
+        name: 'Collaboration',
+        props: true,
+        component: () => import('@/views/FeatureModel.vue'),
+        meta: {
+            title: 'Collaboration Mode',
+        },
     },
     {
         path: '/histories/:id/:slug',
@@ -57,7 +69,7 @@ const routes = [
 ];
 
 const router = createRouter({
-    history: createWebHistory(process.env.BASE_URL),
+    history: createWebHistory(import.meta.env.BASE_URL),
     routes,
 });
 
diff --git a/frontendVue3/src/views/FeatureModel.vue b/frontendVue3/src/views/FeatureModel.vue
index 00e3e9f2..229d2154 100644
--- a/frontendVue3/src/views/FeatureModel.vue
+++ b/frontendVue3/src/views/FeatureModel.vue
@@ -70,6 +70,52 @@
             @update-feature-model="updateFeatureModel"
         ></constraints>
 
+        <collaboration-toolbar
+              v-if="collaborationStatus"
+              :key="collaborationReloadKey"
+              :collaboration-manager="collaborationManager"
+              :show-claim-dialog="showClaimDialog"
+        ></collaboration-toolbar>
+
+        <v-dialog
+            v-model="showStartCollaborationSessionDialog"
+            persistent
+            width="auto"
+        >
+            <v-card>
+                <v-card-title
+                    >Do you want to start a new collaboration
+                    session?</v-card-title
+                >
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        color="red"
+                        variant="text"
+                        @click="showStartCollaborationSessionDialog = false"
+                    >
+                        Cancel
+                    </v-btn>
+
+                    <v-btn color="primary" variant="text" @click="createCollaboration">
+                        Start
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <collaboration-name-dialog
+            v-if="collaborationKey"
+            @change-name="(name) => collaborationManager.sendName(name)"
+        ></collaboration-name-dialog>
+
+        <collaboration-continue-editing-dialog
+            :show="showContinueEditingDialog"
+            @close="closeFeatureModel"
+            @continue-editing="continueEditing"
+        >
+        </collaboration-continue-editing-dialog>
+
 
     </div>
 </template>
@@ -87,17 +133,14 @@ import { jsonToXML } from '@/services/xmlTranspiler.service';
 import CollaborationToolbar from '@/components/CollaborationToolbar';
 import CollaborationNameDialog from '@/components/CollaborationNameDialog';
 import CollaborationContinueEditingDialog from '@/components/CollaborationContinueEditingDialog';
-import { EXAMPLE_FEATURE_MODEL_XML, NODE_CORE_COLOR, NODE_DEAD_COLOR, NODE_FALSEOP_COLOR } from '@/classes/constants';
+import { EXAMPLE_FEATURE_MODEL_XML } from '@/classes/constants';
 import TutorialMode from '@/components/TutorialMode';
 import { NewEmptyModelCommand } from '@/classes/Commands/FeatureModel/NewEmptyModelCommand';
 import { SliceCommand } from "@/classes/Commands/FeatureModel/SliceCommand";
-import { FeatureNode } from "@/classes/FeatureNode";
 import FeatureModelInformation from '@/components/FeatureModel/FeatureModelInformation';
 import { useAppStore } from '@/store/app';
-import { useRouter } from 'vue-router';
 import axios from "axios";
 
-const router = useRouter();
 const appStore = useAppStore();
 
 export default {
@@ -158,7 +201,6 @@ export default {
         );
         this.featureModelCommandManager.commandEvent = this.commandEvent;
         this.constraintCommandManager.commandEvent = this.commandEvent;
-        console.log(this.id);
         if (this.id === 'local') {
             const xml = beautify(localStorage.featureModelData);
             xmlTranspiler.xmlToJson(xml, this.data);
@@ -240,33 +282,30 @@ export default {
             this.loadingData = true;
             await this.checkService()
             if (this.isServiceAvailable) {
-
-                this.xml = jsonToXML(this.data);
-                const content = new TextEncoder().encode(this.xml);
-                let response = await axios.post(`${import.meta.env.VITE_APP_DOMAIN_FEATUREIDESERVICE}slice`, {
-                    name: this.id + ".xml",
-                    selection: [node.name],
-                    content: Array.from(content)
-                });
-                let contentAsString = new TextDecoder().decode(Uint8Array.from(response.data.content));
-                const xml = beautify(contentAsString);
-                let newData = {
-                    featureMap: [],
-                    constraints: [],
-                    properties: [],
-                    calculations: undefined,
-                    comments: [],
-                    featureOrder: undefined,
-                    rootNode: new FeatureNode(null, 'Root', 'and', false, false),
-                };
-                xmlTranspiler.xmlToJson(xml, newData);
-                this.xml = xml;
-                const command = new SliceCommand(
-                    this,
-                    newData
-                );
-                this.featureModelCommandManager.execute(command);
-                this.updateFeatureModel();
+                try {
+                    const content = new TextEncoder().encode(jsonToXML(this.data));
+                    let response = await axios.post(`${import.meta.env.VITE_APP_DOMAIN_FEATUREIDESERVICE}slice`, {
+                        name: "hello.xml",
+                        selection: [node.name],
+                        content: Array.from(content)
+                    });
+                    let contentAsString = new TextDecoder().decode(Uint8Array.from(response.data.content));
+                    const xml = beautify(contentAsString);
+                    const command = new SliceCommand(
+                        this,
+                        xml
+                    );
+                    this.featureModelCommandManager.execute(command);
+                    this.updateFeatureModel();
+                } catch (e) {
+                  this.loadingData = false;
+                  appStore.updateSnackbar(
+                'Could not slice the Feature, because an unknown error occurred.',
+                'error',
+                3000,
+                true
+                  )
+                }
             } else {
                 this.loadingData = false;
                 appStore.updateSnackbar(
@@ -332,7 +371,7 @@ export default {
             this.showStartCollaborationSessionDialog = false;
             this.collaborationManager.createCollaboration();
             navigator.clipboard.writeText(
-                `${import.meta.env.VITE_APP_DOMAIN}collaboration/${
+                `${import.meta.env.VITE_APP_DOMAIN_FRONTEND}collaboration/${
                     this.collaborationManager.collaborationKey
                 }`
             );
@@ -340,15 +379,13 @@ export default {
 
         continueEditing() {
             this.showContinueEditingDialog = false;
-            this.collaborationManager.closeCollaboration();
             this.editRights = true;
         },
 
         closeFeatureModel() {
             this.showContinueEditingDialog = false;
-            this.collaborationManager.closeCollaboration();
             this.collaborationManager.noConfirm = false;
-            router.push('/');
+            this.$router.push({ path: '/' });
         },
 
         errorClosed() {

From 96eadbcc1ff4ee63df993a73ae40bdd469c11f88 Mon Sep 17 00:00:00 2001
From: Lukas Ostheimer <131896156+LukasOsti@users.noreply.github.com>
Date: Thu, 31 Aug 2023 13:50:38 +0200
Subject: [PATCH 10/15] fix: fixed bug that the features would still be colored
 even if service is not reachable

---
 .../src/classes/Commands/CommandManager.js    | 30 +++++++++++++++++--
 .../FeatureModel/colorsFromService.service.js | 19 ++++++++----
 .../services/FeatureModel/update.service.js   |  1 +
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/frontendVue3/src/classes/Commands/CommandManager.js b/frontendVue3/src/classes/Commands/CommandManager.js
index 335f93b7..42972750 100644
--- a/frontendVue3/src/classes/Commands/CommandManager.js
+++ b/frontendVue3/src/classes/Commands/CommandManager.js
@@ -118,21 +118,45 @@ export class CommandManager {
 
     fadeOut(d3Data, command) {
         if(command instanceof ReloadCommand){
-            getColorsFromService(this.collaborationManager.featureModel.data, this.d3Data);
+            getColorsFromService(this.collaborationManager.featureModel.data, d3Data).then(
+              value => {
+                if(!value){
+                  d3Data.coloringIndex = 0;
+                } else {
+                  d3Data.coloringIndex = -1;
+                }
+              }
+            );
             // Rerender for edits and fade them out
             setTimeout(() => {
                 command.unmarkChanges();
                 update.updateSvg(d3Data);
             }, 500);
         } else if(this.type !== 'constraint') {
-            getColorsFromService(this.collaborationManager.featureModel.data, this.d3Data);
+            getColorsFromService(this.collaborationManager.featureModel.data, d3Data).then(
+              value => {
+                if(!value){
+                  d3Data.coloringIndex = 0;
+                } else {
+                  d3Data.coloringIndex = -1;
+                }
+              }
+            );
             // Rerender for edits and fade them out
             setTimeout(() => {
                 command.unmarkChanges();
                 update.updateSvg(d3Data);
             }, 3000);
         } else {
-            getColorsFromService(this.collaborationManager.featureModel.data, this.collaborationManager.featureModelCommandManager.d3Data);
+            getColorsFromService(this.collaborationManager.featureModel.data, this.collaborationManager.featureModelCommandManager.d3Data).then(
+              value => {
+                if(!value){
+                  this.collaborationManager.featureModelCommandManager.d3Data.coloringIndex = 0;
+                } else {
+                  this.collaborationManager.featureModelCommandManager.d3Data.coloringIndex = -1;
+                }
+              }
+            );
             // Rerender for edits and fade them out
             setTimeout(() => {
                 command.unmarkChanges();
diff --git a/frontendVue3/src/services/FeatureModel/colorsFromService.service.js b/frontendVue3/src/services/FeatureModel/colorsFromService.service.js
index 23f13ee8..a01529c4 100644
--- a/frontendVue3/src/services/FeatureModel/colorsFromService.service.js
+++ b/frontendVue3/src/services/FeatureModel/colorsFromService.service.js
@@ -1,15 +1,21 @@
 import { jsonToXML } from '@/services/xmlTranspiler.service';
-import axios from 'axios';
+import axios, { CancelToken } from 'axios';
 import { NODE_CORE_COLOR, NODE_DEAD_COLOR, NODE_FALSEOP_COLOR } from '@/classes/constants';
 import { useAppStore } from '@/store/app';
 
 export async function getColorsFromService(featureModel, d3Data) {
     try {
+        const source = CancelToken.source();
+        const timeout = setTimeout(() => {
+          source.cancel();
+          // Timeout Logic
+        }, 450);
         const content = new TextEncoder().encode(jsonToXML(featureModel));
         let response = await axios.post(`${import.meta.env.VITE_APP_DOMAIN_FEATUREIDESERVICE}stats`, {
           name: featureModel.id + ".xml",
           content: Array.from(content)
-        });
+        }, {cancelToken: source.token});
+        clearTimeout(timeout);
         let deadFeatures = response.data.deadFeatures;
         let falseOptionalFeatures = response.data.falseOptionalFeatures;
         let coreFeatures = response.data.coreFeatures;
@@ -17,13 +23,13 @@ export async function getColorsFromService(featureModel, d3Data) {
         if (coreFeatures.length > 0) {
             d3Data.root.descendants().filter(node => coreFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_CORE_COLOR));
         }
-        if (deadFeatures.length > 0) {
-            d3Data.root.descendants().filter(node => deadFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_DEAD_COLOR));
-        }
         if (falseOptionalFeatures.length > 0) {
             d3Data.root.descendants().filter(node => falseOptionalFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_FALSEOP_COLOR));
         }
-
+        if (deadFeatures.length > 0) {
+            d3Data.root.descendants().filter(node => deadFeatures.includes(node.data.name)).forEach(node => node.data.setColor(NODE_DEAD_COLOR));
+        }
+        return true;
     } catch (e) {
         const appStore = useAppStore()
         appStore.updateSnackbar(
@@ -31,5 +37,6 @@ export async function getColorsFromService(featureModel, d3Data) {
           'error',
           3000,
           true)
+        return false;
     }
 }
diff --git a/frontendVue3/src/services/FeatureModel/update.service.js b/frontendVue3/src/services/FeatureModel/update.service.js
index c6c946e2..2df3b73e 100644
--- a/frontendVue3/src/services/FeatureModel/update.service.js
+++ b/frontendVue3/src/services/FeatureModel/update.service.js
@@ -425,6 +425,7 @@ function updateLinks(d3Data, visibleD3Nodes) {
 
 function updateColoring(d3Data) {
     const allNodes = d3Data.root.data.descendants();
+    console.log(d3Data.coloringIndex);
     count.colorNodes(allNodes, d3Data.coloringIndex);
 }
 

From 39cdbe5c7c00eb4ad4b8991ef9e62ef09ae3d3d6 Mon Sep 17 00:00:00 2001
From: Lukas Ostheimer <131896156+LukasOsti@users.noreply.github.com>
Date: Mon, 4 Sep 2023 17:25:33 +0200
Subject: [PATCH 11/15] fix: fix bug for the other colorings

---
 .../src/classes/Commands/CommandManager.js    | 60 ++++++++++---------
 .../FeatureModel/FeatureModelTreeToolbar.vue  |  9 +--
 .../services/FeatureModel/count.service.js    |  2 +
 .../services/FeatureModel/update.service.js   |  1 -
 4 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/frontendVue3/src/classes/Commands/CommandManager.js b/frontendVue3/src/classes/Commands/CommandManager.js
index 42972750..0d579dd2 100644
--- a/frontendVue3/src/classes/Commands/CommandManager.js
+++ b/frontendVue3/src/classes/Commands/CommandManager.js
@@ -118,45 +118,51 @@ export class CommandManager {
 
     fadeOut(d3Data, command) {
         if(command instanceof ReloadCommand){
-            getColorsFromService(this.collaborationManager.featureModel.data, d3Data).then(
-              value => {
-                if(!value){
-                  d3Data.coloringIndex = 0;
-                } else {
-                  d3Data.coloringIndex = -1;
-                }
-              }
-            );
+            if(d3Data.coloringIndex < 1) {
+                getColorsFromService(this.collaborationManager.featureModel.data, d3Data).then(
+                  value => {
+                    if (!value) {
+                      d3Data.coloringIndex = 0;
+                    } else {
+                      d3Data.coloringIndex = -1;
+                    }
+                  }
+                );
+            }
             // Rerender for edits and fade them out
             setTimeout(() => {
                 command.unmarkChanges();
                 update.updateSvg(d3Data);
             }, 500);
         } else if(this.type !== 'constraint') {
-            getColorsFromService(this.collaborationManager.featureModel.data, d3Data).then(
-              value => {
-                if(!value){
-                  d3Data.coloringIndex = 0;
-                } else {
-                  d3Data.coloringIndex = -1;
-                }
-              }
-            );
+            if(d3Data.coloringIndex < 1) {
+                getColorsFromService(this.collaborationManager.featureModel.data, d3Data).then(
+                  value => {
+                    if (!value) {
+                      d3Data.coloringIndex = 0;
+                    } else {
+                      d3Data.coloringIndex = -1;
+                    }
+                  }
+                );
+            }
             // Rerender for edits and fade them out
             setTimeout(() => {
                 command.unmarkChanges();
                 update.updateSvg(d3Data);
             }, 3000);
         } else {
-            getColorsFromService(this.collaborationManager.featureModel.data, this.collaborationManager.featureModelCommandManager.d3Data).then(
-              value => {
-                if(!value){
-                  this.collaborationManager.featureModelCommandManager.d3Data.coloringIndex = 0;
-                } else {
-                  this.collaborationManager.featureModelCommandManager.d3Data.coloringIndex = -1;
-                }
-              }
-            );
+            if(this.collaborationManager.featureModelCommandManager.d3Data.coloringIndex < 1) {
+                getColorsFromService(this.collaborationManager.featureModel.data, this.collaborationManager.featureModelCommandManager.d3Data).then(
+                  value => {
+                    if (!value) {
+                      this.collaborationManager.featureModelCommandManager.d3Data.coloringIndex = 0;
+                    } else {
+                      this.collaborationManager.featureModelCommandManager.d3Data.coloringIndex = -1;
+                    }
+                  }
+                );
+            }
             // Rerender for edits and fade them out
             setTimeout(() => {
                 command.unmarkChanges();
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
index 57000074..11a6083d 100644
--- a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
@@ -116,7 +116,7 @@
                     <v-list-item-title>Redo</v-list-item-title>
                 </v-list-item>
 
-                <v-menu offset-y :close-on-content-click="false" v-model="isColorMenuOpened">
+                <v-menu offset-y :close-on-content-click="false" >
                     <template v-slot:activator="{ props }">
                         <v-list-item v-bind="props" prepend-icon="mdi-palette">
                             <v-list-item-title>Coloring</v-list-item-title>
@@ -347,7 +347,7 @@ export default {
         maxChildren: 3,
         spaceBetweenParentChild: 75,
         spaceBetweenSiblings: 20,
-        itemsColoring: ['Count', 'Direct Children', 'Total Children'],
+        itemsColoring: ['Standard', 'Direct Children', 'Total Children'],
         isShortName: false,
         semanticEditing: false,
         quickEdit: false,
@@ -379,11 +379,6 @@ export default {
         quickEdit: function (newValue) {
             this.$emit('quickEdit', newValue);
         },
-        isColorMenuOpened: function(newValue) {
-          if(!newValue){
-            this.$emit('coloring', -1)
-          }
-        }
     },
 
     computed: {},
diff --git a/frontendVue3/src/services/FeatureModel/count.service.js b/frontendVue3/src/services/FeatureModel/count.service.js
index dbe72808..fbd3810a 100644
--- a/frontendVue3/src/services/FeatureModel/count.service.js
+++ b/frontendVue3/src/services/FeatureModel/count.service.js
@@ -7,9 +7,11 @@ export function colorNodes(allNodes, coloringIndex) {
 			resetColorNodes(allNodes)
 			break
 		case 1:
+      resetColorNodes(allNodes)
 			coloring(allNodes, countDirectChildren)
 			break
 		case 2:
+      resetColorNodes(allNodes)
 			coloring(allNodes, countTotalChildren)
 			break
 		default:
diff --git a/frontendVue3/src/services/FeatureModel/update.service.js b/frontendVue3/src/services/FeatureModel/update.service.js
index 2df3b73e..c6c946e2 100644
--- a/frontendVue3/src/services/FeatureModel/update.service.js
+++ b/frontendVue3/src/services/FeatureModel/update.service.js
@@ -425,7 +425,6 @@ function updateLinks(d3Data, visibleD3Nodes) {
 
 function updateColoring(d3Data) {
     const allNodes = d3Data.root.data.descendants();
-    console.log(d3Data.coloringIndex);
     count.colorNodes(allNodes, d3Data.coloringIndex);
 }
 

From 2abc80ab4584ce7eea69e565eb8258521aeffc76 Mon Sep 17 00:00:00 2001
From: MeisterSeSe <105605891+MeisterSeSe@users.noreply.github.com>
Date: Thu, 7 Sep 2023 10:45:07 +0200
Subject: [PATCH 12/15] Fix: Wrap the text in the dialog for feature model
 deletion confirmation to ensure automatic line breaks.

---
 frontendVue3/src/components/FeatureModelTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index 0fe091de..4966b5c7 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -89,7 +89,7 @@
                             <v-card>
                                 <v-card-title
                                     class="text-h5"
-                                    style="word-break: break-word"
+                                    style="white-space: normal;"
                                 >
                                     Are you sure you want to delete this feature
                                     model?

From 92b52b880809c3d346f54daf1559543ba32802e0 Mon Sep 17 00:00:00 2001
From: MeisterSeSe <105605891+MeisterSeSe@users.noreply.github.com>
Date: Thu, 7 Sep 2023 10:53:06 +0200
Subject: [PATCH 13/15] Fix: Buttons on top now show info on hover

---
 frontendVue3/src/components/FeatureModelTable.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index 4966b5c7..348c50e3 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -31,7 +31,6 @@
                             density="comfortable"
                         >
                         </v-text-field>
-                        <v-tooltip location="top">
                             <template v-slot:activator="{ props }">
                                 <v-btn
                                     id="feature-model-upload"

From a7e1db6d32bf2e0953452166b487e39b7146d7b0 Mon Sep 17 00:00:00 2001
From: MeisterSeSe <105605891+MeisterSeSe@users.noreply.github.com>
Date: Thu, 7 Sep 2023 11:28:43 +0200
Subject: [PATCH 14/15] Fix: Buttons on top now show info on hover

---
 .../src/components/FeatureModelTable.vue      | 109 +++++++++---------
 1 file changed, 56 insertions(+), 53 deletions(-)

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index 348c50e3..25beb891 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -31,59 +31,62 @@
                             density="comfortable"
                         >
                         </v-text-field>
-                            <template v-slot:activator="{ props }">
-                                <v-btn
-                                    id="feature-model-upload"
-                                    v-if="addable"
-                                    class="mb-2 ml-4"
-                                    color="primary"
-                                    variant="tonal"
-                                    size="small"
-                                    icon="mdi-upload"
-                                    v-bind="props"
-                                    @click="createDialog = true"
-                                >
-                                </v-btn>
-                            </template>
-                            <span>Upload feature model</span>
-                        </v-tooltip>
-                        <v-tooltip top>
-                            <template v-slot:activator="{ on, attrs }">
-                                <v-btn
-                                    id="feature-model-create"
-                                    v-if="addable"
-                                    class="mb-2 ml-2"
-                                    color="success"
-                                    variant="tonal"
-                                    size="small"
-                                    icon="mdi-plus"
-                                    v-bind="attrs"
-                                    v-on="on"
-                                    to="/feature-model/new"
-                                >
-                                </v-btn>
-                            </template>
-                            <span>Create feature model</span>
-                        </v-tooltip>
-                        <v-tooltip top>
-                            <template v-slot:activator="{ on, attrs }">
-                                <v-btn
-                                    id="feature-model-ls"
-                                    v-if="addable"
-                                    :disabled="!checkLocalStorage"
-                                    class="mb-2 ml-2"
-                                    color="secondary"
-                                    variant="tonal"
-                                    size="small"
-                                    icon="mdi-server"
-                                    v-bind="attrs"
-                                    v-on="on"
-                                    to="/feature-model/local"
-                                >
-                                </v-btn>
-                            </template>
-                            <span>Upload from local storage</span>
-                        </v-tooltip>
+                      <v-tooltip location='top'>
+                        <template v-slot:activator='{ props }'>
+                          <v-btn
+                            id='feature-model-upload'
+                            v-if='addable'
+                            class='mb-2 ml-4'
+                            color='primary'
+                            variant='tonal'
+                            size='small'
+                            icon='mdi-upload'
+                            v-bind='props'
+                            @click='createDialog = true'
+                          >
+                          </v-btn>
+                        </template>
+                        <span>Upload feature model</span>
+                      </v-tooltip>
+
+                      <v-tooltip location='top'>
+                        <template v-slot:activator='{ props }'>
+                          <v-btn
+                            id='feature-model-create'
+                            v-if='addable'
+                            class='mb-2 ml-2'
+                            color='success'
+                            variant='tonal'
+                            size='small'
+                            icon='mdi-plus'
+                            v-bind='props'
+                            v-on='on'
+                            to='/feature-model/new'
+                          >
+                          </v-btn>
+                        </template>
+                        <span>Create feature model</span>
+                      </v-tooltip>
+
+                      <v-tooltip location='top'>
+                        <template v-slot:activator='{ props }'>
+                          <v-btn
+                            id='feature-model-ls'
+                            v-if='addable'
+                            :disabled='!checkLocalStorage'
+                            class='mb-2 ml-2'
+                            color='secondary'
+                            variant='tonal'
+                            size='small'
+                            icon='mdi-server'
+                            v-bind='props'
+                            v-on='on'
+                            to='/feature-model/local'
+                          >
+                          </v-btn>
+                        </template>
+                        <span>Upload from local storage</span>
+                      </v-tooltip>
                         <v-dialog v-model="dialogDelete" max-width="400px">
                             <v-card>
                                 <v-card-title

From d91e44268be065202428b3a94d3e42e4e2f9afa1 Mon Sep 17 00:00:00 2001
From: MeisterSeSe <105605891+MeisterSeSe@users.noreply.github.com>
Date: Thu, 7 Sep 2023 11:31:41 +0200
Subject: [PATCH 15/15] Refactor: Removed unnecessary Variables regarding Lukas
 suggestion

---
 .../src/components/FeatureModelTable.vue      |  5 --
 frontendVue3/src/views/Models.vue             | 49 ++-----------------
 2 files changed, 3 insertions(+), 51 deletions(-)

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index 25beb891..7dcda118 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -231,14 +231,12 @@
 
 <script setup>
 import FileCreate from '@/components/upload_cards/FileCreate.vue';
-import { useAuthStore } from '@/store/auth';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useFileStore } from '@/store/file';
 
 const emit = defineEmits(['onDelete']);
 const router = useRouter();
-const authStore = useAuthStore();
 const fileStore = useFileStore();
 
 const props = defineProps({
@@ -291,10 +289,8 @@ const headers = [
 ];
 const search = ref('');
 const removeLoading = ref(false);
-const dialog = ref(false);
 const createDialog = ref(false);
 const dialogDelete = ref(false);
-const dialogAnalysis = false;
 const editedItem = ref(null);
 const defaultItem = ref(undefined);
 const checkLocalStorage = computed(() => {
@@ -327,7 +323,6 @@ function handleClick(value) {
         params: { id: value.id, slug: value.slug },
     });
 }
-function setHovered() {}
 </script>
 
 <style>
diff --git a/frontendVue3/src/views/Models.vue b/frontendVue3/src/views/Models.vue
index 8f64caa5..38ff0867 100644
--- a/frontendVue3/src/views/Models.vue
+++ b/frontendVue3/src/views/Models.vue
@@ -54,52 +54,9 @@ const appStore = useAppStore();
 const { confirmedFeatureModels } = storeToRefs(useFileStore());
 const fileStore = useFileStore();
 
-const search = '';
-const dialog = false;
-const createDialog = false;
-const editedIndex = -1;
-const headers = [
-    {
-        text: 'ID',
-        align: 'start',
-        sortable: false,
-        value: 'id',
-    },
-    { text: 'Label', value: 'label' },
-    { text: 'Description', value: 'description' },
-    { text: 'License', value: 'license' },
-    { text: 'Tags', value: 'tags' },
-    { text: 'Uploaded on', value: 'uploaded' },
-    {
-        text: 'Actions',
-        align: 'center',
-        value: 'actions',
-        sortable: false,
-    },
-];
-const editedItem = {
-    label: '',
-    description: '',
-    license: 'CC-BY Mention',
-    tags: null,
-    uploaded: 'Today',
-};
-const defaultItem = {
-    label: '',
-    description: '',
-    license: 'CC-BY Mention',
-    tags: null,
-    uploaded: 'Today',
-};
-const licenses = [];
-const families = [];
-const tags = [];
-const check1 = false;
-const check2 = false;
-const check3 = false;
+
 const loading = ref(false);
-const info = '';
-const showTutorial = false;
+/*const showTutorial = false;
 const tutorialSteps = [
     {
         title: 'Welcome to the tutorial!',
@@ -137,7 +94,7 @@ const tutorialSteps = [
             'If there is a feature model in the local storage, you can view it by clicking this button.',
         elementCssSelector: '#feature-model-ls',
     },
-];
+];*/
 
 onMounted(() => {
     fileStore.fetchConfirmedFeatureModels();