From f9a1da253e0d0424bf37198ea432cba92edf7469 Mon Sep 17 00:00:00 2001
From: lukharsch <lukasharsch@web.de>
Date: Wed, 4 Jan 2023 00:01:43 +0100
Subject: [PATCH 1/8] Added boilerplate dialog and data for comparing artifacts
 of two fm

---
 frontend/src/views/FileDetail.vue | 196 +++++++++++++++++++++++++++++-
 1 file changed, 193 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/FileDetail.vue b/frontend/src/views/FileDetail.vue
index 22ad613b..86acee87 100644
--- a/frontend/src/views/FileDetail.vue
+++ b/frontend/src/views/FileDetail.vue
@@ -205,9 +205,33 @@
                 <div id="feature-model-artifacts">
                     <h5 class="text-h5 mb-4">Artifacts (tbd)</h5>
                     <div class="my-3">
-                        <v-skeleton-loader
-                            type="list-item-avatar-two-line@5"
-                        ></v-skeleton-loader>
+                        <v-list rounded>
+                            <v-subheader>REPORTS</v-subheader>
+                            <v-list-item
+                                v-for="(item, i) in artifacts"
+                                :key="i"
+                            >
+                                <v-list-item-avatar>
+                                    <v-icon> mdi-file-document-outline </v-icon>
+                                </v-list-item-avatar>
+                                <v-list-item-content>
+                                    <v-list-item-title>
+                                        {{ item.title }}
+                                    </v-list-item-title>
+                                    <v-list-item-subtitle>
+                                        {{ item.subtitle }}
+                                    </v-list-item-subtitle>
+                                </v-list-item-content>
+                                <v-list-item-action>
+                                    <v-btn
+                                        icon
+                                        @click.stop="showArtifactDialog(item)"
+                                    >
+                                        <v-icon> mdi-eye </v-icon>
+                                    </v-btn>
+                                </v-list-item-action>
+                            </v-list-item>
+                        </v-list>
                     </div>
                 </div>
                 <div class="my-3" id="feature-model-analysis-progress">
@@ -355,6 +379,120 @@
                 </v-card-actions>
             </v-card>
         </v-dialog>
+        <v-dialog v-model="dialogArtifact" max-width="1200px" width="90vw">
+            <v-card>
+                <v-card-title class="text-h5">
+                    Analysis: {{ selectedArtifact.title }}
+                    <v-spacer></v-spacer>
+                    <v-btn icon @click="dialogArtifact = false">
+                        <v-icon> mdi-close </v-icon>
+                    </v-btn>
+                </v-card-title>
+
+                <v-card-text>
+                    <v-row class="ma-1">
+                        <v-col
+                            cols="12"
+                            :md="isRightFmSelected ? 6 : 8"
+                            :lg="isRightFmSelected ? 6 : 9"
+                            class="pa-2"
+                        >
+                            <h6 class="text-h6">{{ file.label }}</h6>
+                            <v-skeleton-loader type="card"> </v-skeleton-loader>
+                        </v-col>
+                        <v-col
+                            v-if="!isRightFmSelected"
+                            cols="12"
+                            md="4"
+                            lg="3"
+                            class="pa-2"
+                            style="border: 2px dashed grey"
+                        >
+                            <v-sheet
+                                v-if="!shouldCompare"
+                                height="300px"
+                                min-height="190px"
+                                width="100%"
+                                class="d-flex justify-center align-center pointer-on-hover"
+                                @click="compare"
+                            >
+                                <div class="text-h6 text-info text-center">
+                                    Click to compare with another feature model
+                                </div>
+                            </v-sheet>
+                            <div v-else>
+                                <v-btn
+                                    icon
+                                    @click="shouldCompare = false"
+                                    class="mr-2"
+                                >
+                                    <v-icon>mdi-arrow-left</v-icon>
+                                </v-btn>
+                                <span class="text-subtitle-1"
+                                    >My Feature Models</span
+                                >
+                                <v-progress-circular
+                                    style="display: block"
+                                    indeterminate
+                                    color="primary"
+                                    v-if="loadingComparableFM"
+                                ></v-progress-circular>
+                                <v-list
+                                    rounded
+                                    v-else
+                                    height="300px"
+                                    style="overflow-y: auto"
+                                >
+                                    <v-list-item-group
+                                        v-model="selectedRightFM"
+                                        color="primary"
+                                    >
+                                        <v-list-item
+                                            v-for="(item, i) in getMyFM"
+                                            :key="i"
+                                        >
+                                            <v-list-item-avatar>
+                                                <v-icon>
+                                                    mdi-family-tree
+                                                </v-icon>
+                                            </v-list-item-avatar>
+                                            <v-list-item-content>
+                                                <v-list-item-title>
+                                                    {{ item.label }}
+                                                </v-list-item-title>
+                                                <v-list-item-subtitle>
+                                                    {{
+                                                        new Date(
+                                                            item.uploaded_at
+                                                        ).toLocaleString(
+                                                            'en-US'
+                                                        )
+                                                    }}
+                                                </v-list-item-subtitle>
+                                            </v-list-item-content>
+                                        </v-list-item>
+                                    </v-list-item-group>
+                                </v-list>
+                            </div>
+                        </v-col>
+                        <v-col v-else cols="12" md="6" lg="6" class="pa-2">
+                            <h6 class="text-h6">
+                                <v-btn
+                                    color="inherit"
+                                    icon
+                                    @click="selectedRightFM = -1"
+                                    class="mr-2"
+                                >
+                                    <v-icon>mdi-arrow-left</v-icon>
+                                </v-btn>
+                                {{ getMyFM[selectedRightFM].label }}
+                            </h6>
+                            <v-skeleton-loader type="card"> </v-skeleton-loader>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
         <tutorial-mode
             :show="showTutorial"
             @close="showTutorial = false"
@@ -395,6 +533,12 @@ export default Vue.extend({
         file: {},
         loading: true,
         dialogDelete: false,
+        dialogArtifact: false,
+        shouldCompare: false,
+        loadingComparableFM: false,
+        selectedRightFM: -1,
+        selectedArtifact: {},
+        rightFmIsSelected: false,
         removeLoading: false,
         searchAnalysis: '',
         headersAnalysis: [
@@ -461,6 +605,24 @@ export default Vue.extend({
                 elementCssSelector: '#feature-model-artifacts',
             },
         ],
+        artifacts: [
+            {
+                title: 'Binary',
+                subtitle: 'Displaying binaries of feature model',
+            },
+            {
+                title: 'Purpose of life',
+                subtitle: 'What is it even?',
+            },
+            {
+                title: 'Complex Document',
+                subtitle: 'Generated from analysis: complex analysis',
+            },
+            {
+                title: 'Final.docx',
+                subtitle: 'Test file',
+            },
+        ],
     }),
 
     async mounted() {
@@ -470,11 +632,23 @@ export default Vue.extend({
         //await this.fetchFeatureModelOfFamily(this.family.id)
     },
 
+    watch: {
+        selectedRightFM: function (newValue) {
+            console.log(newValue);
+        },
+    },
+
     created() {
         this.showTutorial = !localStorage.fileDetailTutorialCompleted;
     },
 
     computed: {
+        isRightFmSelected() {
+            return this.selectedRightFM !== -1;
+        },
+        getMyFM() {
+            return this.$store.state.featureModels.filter((item) => item.owner);
+        },
         getStati() {
             /*function compute(amount) {
                 return (
@@ -545,6 +719,16 @@ export default Vue.extend({
             this.removeLoading = false;
             await this.$router.push('/');
         },
+        showArtifactDialog(item) {
+            this.selectedArtifact = item;
+            this.dialogArtifact = true;
+        },
+        async compare() {
+            this.shouldCompare = true;
+            this.loadingComparableFM = true;
+            await this.$store.dispatch('fetchFeatureModels');
+            this.loadingComparableFM = false;
+        },
         /*async fetchFeatureModelOfFamily(value) {
 			await api
 				.get(`${API_URL}files/uploaded/confirmed/?family=${value}`)
@@ -556,3 +740,9 @@ export default Vue.extend({
     },
 });
 </script>
+
+<style>
+.pointer-on-hover:hover {
+    cursor: pointer;
+}
+</style>

From ba7af5634c5dd78b2bae0c699b2b83aa71d75040 Mon Sep 17 00:00:00 2001
From: lukharsch <lukasharsch@web.de>
Date: Fri, 3 Feb 2023 14:38:57 +0100
Subject: [PATCH 2/8] Added file comparison with CSV and XML (tbd)

---
 frontend/src/views/FileDetail.vue | 3801 +++++++++++++++++++++++------
 1 file changed, 3116 insertions(+), 685 deletions(-)

diff --git a/frontend/src/views/FileDetail.vue b/frontend/src/views/FileDetail.vue
index 86acee87..a212512d 100644
--- a/frontend/src/views/FileDetail.vue
+++ b/frontend/src/views/FileDetail.vue
@@ -1,178 +1,181 @@
 <template>
-    <div class="mainView">
-        <h3 class="text-h3 mb-2 mt-8">
-            Feature Model:
-            <span v-if="loading">
+  <div class="mainView">
+    <h3 class="text-h3 mb-2 mt-8">
+      Feature Model:
+      <span v-if="loading">
                 <v-progress-circular
                     indeterminate
                     v-if="loading"
                 ></v-progress-circular>
             </span>
-            <span v-else>
+      <span v-else>
                 {{ file.label }}
             </span>
-        </h3>
-        <v-row justify="space-between">
-            <v-col cols="12" md="6" id="feature-model-details">
-                <h5 class="text-h5 mb-4">Details and more information</h5>
-
-                <v-list two-line>
-                    <v-list-item>
-                        <v-list-item-icon>
-                            <v-icon color="primary"> mdi-information </v-icon>
-                        </v-list-item-icon>
-
-                        <v-list-item-content>
-                            <v-list-item-title>
-                                {{ loading ? '...' : file.label }}
-                            </v-list-item-title>
-                            <v-list-item-subtitle>Label</v-list-item-subtitle>
-                        </v-list-item-content>
-
-                        <v-list-item-action>
-                            <v-btn icon>
-                                <v-icon>mdi-pencil</v-icon>
-                            </v-btn>
-                        </v-list-item-action>
-                    </v-list-item>
+    </h3>
+    <v-row justify="space-between">
+      <v-col cols="12" md="6" id="feature-model-details">
+        <h5 class="text-h5 mb-4">Details and more information</h5>
 
-                    <v-list-item>
-                        <v-list-item-icon></v-list-item-icon>
-
-                        <v-list-item-content>
-                            <v-list-item-title>
-                                {{ loading ? '...' : file.description }}
-                            </v-list-item-title>
-                            <v-list-item-subtitle
-                                >Description</v-list-item-subtitle
-                            >
-                        </v-list-item-content>
-
-                        <v-list-item-action>
-                            <v-btn icon>
-                                <v-icon>mdi-pencil</v-icon>
-                            </v-btn>
-                        </v-list-item-action>
-                    </v-list-item>
+        <v-list two-line>
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon color="primary"> mdi-information</v-icon>
+            </v-list-item-icon>
 
-                    <v-divider inset></v-divider>
-
-                    <v-list-item>
-                        <v-list-item-icon>
-                            <v-icon color="primary"> mdi-license </v-icon>
-                        </v-list-item-icon>
-
-                        <v-list-item-content>
-                            <v-list-item-title>
-                                {{ loading ? '...' : file.license.label }}
-                            </v-list-item-title>
-                            <v-list-item-subtitle>License</v-list-item-subtitle>
-                        </v-list-item-content>
-
-                        <!--						<v-list-item-action>
-							<v-btn icon>
-								<v-icon>mdi-pencil</v-icon>
-							</v-btn>
-						</v-list-item-action>-->
-                    </v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ loading ? '...' : file.label }}
+              </v-list-item-title>
+              <v-list-item-subtitle>Label</v-list-item-subtitle>
+            </v-list-item-content>
 
-                    <v-divider inset></v-divider>
-
-                    <v-list-item>
-                        <v-list-item-icon>
-                            <v-icon color="primary"> mdi-tag </v-icon>
-                        </v-list-item-icon>
-
-                        <v-list-item-content>
-                            <v-list-item-title>
-                                <v-chip
-                                    class="mr-2"
-                                    v-for="tag in file.tags"
-                                    :key="tag.id"
-                                >
-                                    {{ tag.label }}
-                                </v-chip>
-                            </v-list-item-title>
-                            <v-list-item-subtitle>Tags</v-list-item-subtitle>
-                        </v-list-item-content>
-
-                        <v-list-item-action>
-                            <v-btn icon>
-                                <v-icon>mdi-pencil</v-icon>
-                            </v-btn>
-                        </v-list-item-action>
-                    </v-list-item>
-                    <v-divider inset></v-divider>
-                    <v-list-item>
-                        <v-list-item-icon>
-                            <v-icon color="primary"> mdi-calendar </v-icon>
-                        </v-list-item-icon>
-
-                        <v-list-item-content>
-                            <v-list-item-title>
-                                {{
-                                    new Date(file.uploaded_at).toLocaleString(
-                                        'en-US'
-                                    )
-                                }}
-                            </v-list-item-title>
-                            <v-list-item-subtitle
-                                >Uploaded on</v-list-item-subtitle
-                            >
-                        </v-list-item-content>
-
-                        <!--						<v-list-item-action>
-							<v-btn icon>
-								<v-icon>mdi-pencil</v-icon>
-							</v-btn>
-						</v-list-item-action>-->
-                    </v-list-item>
-                    <v-divider inset></v-divider>
-                    <v-list-item>
-                        <v-list-item-icon>
-                            <v-icon color="primary">
-                                mdi-human-male-female-child
-                            </v-icon>
-                        </v-list-item-icon>
-
-                        <v-list-item-content>
-                            <v-list-item-title>
-                                {{ loading ? '...' : file.family.label }} ({{
-                                    loading ? '...' : file.version
-                                }})
-                            </v-list-item-title>
-                            <v-list-item-subtitle
-                                >Family and version</v-list-item-subtitle
-                            >
-                        </v-list-item-content>
-
-                        <!--						<v-list-item-action>
-							<v-btn icon>
-								<v-icon>mdi-pencil</v-icon>
-							</v-btn>
-						</v-list-item-action>-->
-                    </v-list-item>
-                </v-list>
-                <div
-                    class="mt-3 d-flex justify-space-between align-center"
-                    id="feature-model-actions"
+            <v-list-item-action>
+              <v-btn icon>
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+
+          <v-list-item>
+            <v-list-item-icon></v-list-item-icon>
+
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ loading ? '...' : file.description }}
+              </v-list-item-title>
+              <v-list-item-subtitle
+              >Description
+              </v-list-item-subtitle
+              >
+            </v-list-item-content>
+
+            <v-list-item-action>
+              <v-btn icon>
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+
+          <v-divider inset></v-divider>
+
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon color="primary"> mdi-license</v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ loading ? '...' : file.license.label }}
+              </v-list-item-title>
+              <v-list-item-subtitle>License</v-list-item-subtitle>
+            </v-list-item-content>
+
+            <!--						<v-list-item-action>
+  <v-btn icon>
+    <v-icon>mdi-pencil</v-icon>
+  </v-btn>
+</v-list-item-action>-->
+          </v-list-item>
+
+          <v-divider inset></v-divider>
+
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon color="primary"> mdi-tag</v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-content>
+              <v-list-item-title>
+                <v-chip
+                    class="mr-2"
+                    v-for="tag in file.tags"
+                    :key="tag.id"
                 >
-                    <div>
-                        <div class="d-inline-block mr-2">
-                            <v-btn
-                                color="primary"
-                                outlined
-                                :to="'/feature-model/' + file.id"
-                            >
-                                <v-icon dark left>mdi-eye</v-icon>
-                                View Model
-                            </v-btn>
-                        </div>
-                        <div class="d-inline-block">
-                            <v-btn
-                                outlined
-                                color="primary"
-                                @click="
+                  {{ tag.label }}
+                </v-chip>
+              </v-list-item-title>
+              <v-list-item-subtitle>Tags</v-list-item-subtitle>
+            </v-list-item-content>
+
+            <v-list-item-action>
+              <v-btn icon>
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+          <v-divider inset></v-divider>
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon color="primary"> mdi-calendar</v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-content>
+              <v-list-item-title>
+                {{
+                  new Date(file.uploaded_at).toLocaleString(
+                      'en-US'
+                  )
+                }}
+              </v-list-item-title>
+              <v-list-item-subtitle
+              >Uploaded on
+              </v-list-item-subtitle
+              >
+            </v-list-item-content>
+
+            <!--						<v-list-item-action>
+  <v-btn icon>
+    <v-icon>mdi-pencil</v-icon>
+  </v-btn>
+</v-list-item-action>-->
+          </v-list-item>
+          <v-divider inset></v-divider>
+          <v-list-item>
+            <v-list-item-icon>
+              <v-icon color="primary">
+                mdi-human-male-female-child
+              </v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ loading ? '...' : file.family.label }} ({{
+                  loading ? '...' : file.version
+                }})
+              </v-list-item-title>
+              <v-list-item-subtitle
+              >Family and version
+              </v-list-item-subtitle
+              >
+            </v-list-item-content>
+
+            <!--						<v-list-item-action>
+  <v-btn icon>
+    <v-icon>mdi-pencil</v-icon>
+  </v-btn>
+</v-list-item-action>-->
+          </v-list-item>
+        </v-list>
+        <div
+            class="mt-3 d-flex justify-space-between align-center"
+            id="feature-model-actions"
+        >
+          <div>
+            <div class="d-inline-block mr-2">
+              <v-btn
+                  color="primary"
+                  outlined
+                  :to="'/feature-model/' + file.id"
+              >
+                <v-icon dark left>mdi-eye</v-icon>
+                View Model
+              </v-btn>
+            </div>
+            <div class="d-inline-block">
+              <v-btn
+                  outlined
+                  color="primary"
+                  @click="
                                     $router.push({
                                         name: 'FamilyDetail',
                                         params: {
@@ -181,336 +184,365 @@
                                         },
                                     })
                                 "
-                            >
-                                <v-icon dark left>
-                                    mdi-human-male-female-child
-                                </v-icon>
-                                See Family
-                            </v-btn>
-                        </div>
-                    </div>
-                    <div class="d-inline-block">
-                        <v-btn
-                            outlined
-                            color="error"
-                            :disabled="file.owner === false"
-                            @click="deleteItem(item)"
-                        >
-                            Delete Model
-                        </v-btn>
-                    </div>
-                </div>
-            </v-col>
-            <v-col cols="12" md="6">
-                <div id="feature-model-artifacts">
-                    <h5 class="text-h5 mb-4">Artifacts (tbd)</h5>
-                    <div class="my-3">
-                        <v-list rounded>
-                            <v-subheader>REPORTS</v-subheader>
-                            <v-list-item
-                                v-for="(item, i) in artifacts"
-                                :key="i"
-                            >
-                                <v-list-item-avatar>
-                                    <v-icon> mdi-file-document-outline </v-icon>
-                                </v-list-item-avatar>
-                                <v-list-item-content>
-                                    <v-list-item-title>
-                                        {{ item.title }}
-                                    </v-list-item-title>
-                                    <v-list-item-subtitle>
-                                        {{ item.subtitle }}
-                                    </v-list-item-subtitle>
-                                </v-list-item-content>
-                                <v-list-item-action>
-                                    <v-btn
-                                        icon
-                                        @click.stop="showArtifactDialog(item)"
-                                    >
-                                        <v-icon> mdi-eye </v-icon>
-                                    </v-btn>
-                                </v-list-item-action>
-                            </v-list-item>
-                        </v-list>
-                    </div>
-                </div>
-                <div class="my-3" id="feature-model-analysis-progress">
-                    <div
-                        class="d-flex justify-center flex-column align-center my-3"
-                    >
-                        <span>Analyses Progress:</span>
-                        <div class="pa-0" style="width: 100%">
-                            <div
-                                :style="`width: ${getStati.success.percentage}%!important`"
-                                class="d-inline-block"
-                            >
-                                <v-tooltip bottom>
-                                    <template v-slot:activator="{ on, attrs }">
-                                        <v-progress-linear
-                                            height="15"
-                                            value="100"
-                                            color="green"
-                                            v-bind="attrs"
-                                            v-on="on"
-                                        />
-                                    </template>
-                                    <span>
+              >
+                <v-icon dark left>
+                  mdi-human-male-female-child
+                </v-icon>
+                See Family
+              </v-btn>
+            </div>
+          </div>
+          <div class="d-inline-block">
+            <v-btn
+                outlined
+                color="error"
+                :disabled="file.owner === false"
+                @click="deleteItem(item)"
+            >
+              Delete Model
+            </v-btn>
+          </div>
+        </div>
+      </v-col>
+      <v-col cols="12" md="6">
+        <div id="feature-model-artifacts">
+          <h5 class="text-h5 mb-4">Artifacts (tbd)</h5>
+          <div class="my-3">
+            <v-list rounded>
+              <v-subheader>REPORTS</v-subheader>
+              <v-list-item
+                  v-for="(item, i) in artifacts"
+                  :key="i"
+              >
+                <v-list-item-avatar>
+                  <v-icon> mdi-file-document-outline</v-icon>
+                </v-list-item-avatar>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ item.title }}
+                  </v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ item.subtitle }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+                <v-list-item-action>
+                  <v-btn
+                      icon
+                      @click.stop="showArtifactDialog(item)"
+                  >
+                    <v-icon> mdi-eye</v-icon>
+                  </v-btn>
+                </v-list-item-action>
+              </v-list-item>
+            </v-list>
+          </div>
+        </div>
+        <div class="my-3" id="feature-model-analysis-progress">
+          <div
+              class="d-flex justify-center flex-column align-center my-3"
+          >
+            <span>Analyses Progress:</span>
+            <div class="pa-0" style="width: 100%">
+              <div
+                  :style="`width: ${getStati.success.percentage}%!important`"
+                  class="d-inline-block"
+              >
+                <v-tooltip bottom>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-progress-linear
+                        height="15"
+                        value="100"
+                        color="green"
+                        v-bind="attrs"
+                        v-on="on"
+                    />
+                  </template>
+                  <span>
                                         Success:
                                         {{ getStati.success.absolute }} /
                                         {{ getStati.amount }}
                                     </span>
-                                </v-tooltip>
-                            </div>
-                            <div
-                                :style="`width: ${getStati.error.percentage}%!important`"
-                                class="d-inline-block"
-                            >
-                                <v-tooltip bottom>
-                                    <template v-slot:activator="{ on, attrs }">
-                                        <v-progress-linear
-                                            height="15"
-                                            value="100"
-                                            color="error"
-                                            v-bind="attrs"
-                                            v-on="on"
-                                        />
-                                    </template>
-                                    <span>
+                </v-tooltip>
+              </div>
+              <div
+                  :style="`width: ${getStati.error.percentage}%!important`"
+                  class="d-inline-block"
+              >
+                <v-tooltip bottom>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-progress-linear
+                        height="15"
+                        value="100"
+                        color="error"
+                        v-bind="attrs"
+                        v-on="on"
+                    />
+                  </template>
+                  <span>
                                         Error:
                                         {{ getStati.error.absolute }} /
                                         {{ getStati.amount }}
                                     </span>
-                                </v-tooltip>
-                            </div>
-                            <div
-                                :style="`width: ${getStati.progress.percentage}%!important`"
-                                class="d-inline-block"
-                            >
-                                <v-tooltip bottom>
-                                    <template v-slot:activator="{ on, attrs }">
-                                        <v-progress-linear
-                                            height="15"
-                                            value="100"
-                                            color="primary"
-                                            v-bind="attrs"
-                                            v-on="on"
-                                        />
-                                    </template>
-                                    <span>
+                </v-tooltip>
+              </div>
+              <div
+                  :style="`width: ${getStati.progress.percentage}%!important`"
+                  class="d-inline-block"
+              >
+                <v-tooltip bottom>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-progress-linear
+                        height="15"
+                        value="100"
+                        color="primary"
+                        v-bind="attrs"
+                        v-on="on"
+                    />
+                  </template>
+                  <span>
                                         In progress:
                                         {{ getStati.progress.absolute }} /
                                         {{ getStati.amount }}
                                     </span>
-                                </v-tooltip>
-                            </div>
-                        </div>
-                    </div>
-                    <v-data-table
-                        :headers="headersAnalysis"
-                        :items="itemsAnalysis"
-                        :loading="loading"
-                        :search="searchAnalysis"
-                        class="elevation-1"
-                    >
-                        <template v-slot:top>
-                            <v-toolbar flat>
-                                <v-toolbar-title class="hidden-sm-and-down"
-                                    >Analyses</v-toolbar-title
-                                >
-                                <v-divider
-                                    class="mx-4 hidden-sm-and-down"
-                                    inset
-                                    vertical
-                                ></v-divider>
-                                <v-spacer class="hidden-sm-and-down"></v-spacer>
-                                <v-text-field
-                                    v-model="searchAnalysis"
-                                    append-icon="mdi-magnify"
-                                    hide-details
-                                    label="Search"
-                                    single-line
-                                >
-                                </v-text-field>
-                            </v-toolbar>
-                        </template>
-                        <template v-slot:item.status="{ item }">
-                            <v-progress-circular
-                                v-if="item.status === 0"
-                                size="24"
-                                width="3"
-                                indeterminate
-                                color="primary"
-                            ></v-progress-circular>
-                            <v-icon
-                                v-else-if="item.status === 1"
-                                color="success"
-                            >
-                                mdi-check
-                            </v-icon>
-                            <v-icon v-else color="error"> mdi-cancel</v-icon>
-                        </template>
-                        <template v-slot:item.id="{ index }">
-                            {{ index + 1 }}
-                        </template>
-                    </v-data-table>
-                </div>
+                </v-tooltip>
+              </div>
+            </div>
+          </div>
+          <v-data-table
+              :headers="headersAnalysis"
+              :items="itemsAnalysis"
+              :loading="loading"
+              :search="searchAnalysis"
+              class="elevation-1"
+          >
+            <template v-slot:top>
+              <v-toolbar flat>
+                <v-toolbar-title class="hidden-sm-and-down"
+                >Analyses
+                </v-toolbar-title
+                >
+                <v-divider
+                    class="mx-4 hidden-sm-and-down"
+                    inset
+                    vertical
+                ></v-divider>
+                <v-spacer class="hidden-sm-and-down"></v-spacer>
+                <v-text-field
+                    v-model="searchAnalysis"
+                    append-icon="mdi-magnify"
+                    hide-details
+                    label="Search"
+                    single-line
+                >
+                </v-text-field>
+              </v-toolbar>
+            </template>
+            <template v-slot:item.status="{ item }">
+              <v-progress-circular
+                  v-if="item.status === 0"
+                  size="24"
+                  width="3"
+                  indeterminate
+                  color="primary"
+              ></v-progress-circular>
+              <v-icon
+                  v-else-if="item.status === 1"
+                  color="success"
+              >
+                mdi-check
+              </v-icon>
+              <v-icon v-else color="error"> mdi-cancel</v-icon>
+            </template>
+            <template v-slot:item.id="{ index }">
+              {{ index + 1 }}
+            </template>
+          </v-data-table>
+        </div>
+      </v-col>
+    </v-row>
+    <v-dialog v-model="dialogDelete" max-width="400px">
+      <v-card>
+        <v-card-title class="text-h5" style="word-break: break-word">
+          Are you sure you want to delete this feature model?
+        </v-card-title>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" text @click="closeDelete"
+          >Cancel
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn
+              :loading="removeLoading"
+              color="primary"
+              text
+              @click="deleteItemConfirm"
+          >
+            Delete
+          </v-btn>
+          <v-spacer></v-spacer>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog v-model="dialogArtifact" fullscreen transition="dialog-bottom-transition">
+      <v-toolbar
+          dark
+      >
+        <v-icon class="mr-2">mdi-file-compare</v-icon>
+        <v-toolbar-title>View and compare Feature Model artifacts: <span
+            class="font-weight-bold">{{ selectedArtifact.title }}</span></v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-toolbar-items>
+          <v-btn
+              icon
+              dark
+              @click="dialogArtifact = false"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-toolbar-items>
+      </v-toolbar>
+      <v-card>
+        <v-card-text>
+          <v-row class="ma-1">
+            <v-col
+                cols="12"
+                :md="isRightFmSelected ? 6 : 8"
+                :lg="isRightFmSelected ? 6 : 9"
+                class="pa-2"
+            >
+              <h6 class="text-h6">Feature Model: {{ file.label }}</h6>
+
+              <v-data-table
+                  v-if="selectedArtifact.title === 'CSV'"
+                  :headers="headerCsvArtifact"
+                  :items="itemsCsvArtifact"
+                  :items-per-page="10"
+              ></v-data-table>
+              <div v-else>
+                <textarea v-model="xmlFile" style="border:none; width: 100%; height: 500px; color: white">
+                </textarea>
+              </div>
             </v-col>
-        </v-row>
-        <v-dialog v-model="dialogDelete" max-width="400px">
-            <v-card>
-                <v-card-title class="text-h5" style="word-break: break-word">
-                    Are you sure you want to delete this feature model?
-                </v-card-title>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="primary" text @click="closeDelete"
-                        >Cancel
-                    </v-btn>
-                    <v-spacer></v-spacer>
-                    <v-btn
-                        :loading="removeLoading"
-                        color="primary"
-                        text
-                        @click="deleteItemConfirm"
+            <v-col
+                v-if="!isRightFmSelected"
+                cols="12"
+                md="4"
+                lg="3"
+                class="pa-2"
+                style="border: 2px dashed grey"
+            >
+              <v-sheet
+                  v-if="!shouldCompare"
+                  height="300px"
+                  min-height="190px"
+                  width="100%"
+                  class="d-flex justify-center align-center pointer-on-hover"
+                  @click="compare"
+              >
+                <div class="text-h6 text-info text-center">
+                  Click to compare with another feature model
+                </div>
+              </v-sheet>
+              <div v-else>
+                <v-btn
+                    icon
+                    @click="shouldCompare = false"
+                    class="mr-2"
+                >
+                  <v-icon>mdi-arrow-left</v-icon>
+                </v-btn>
+                <span class="text-subtitle-1"
+                >My Feature Models</span
+                >
+                <v-progress-circular
+                    style="display: block"
+                    indeterminate
+                    color="primary"
+                    v-if="loadingComparableFM"
+                ></v-progress-circular>
+                <v-list
+                    rounded
+                    v-else
+                    height="300px"
+                    style="overflow-y: auto"
+                >
+                  <v-list-item-group
+                      v-model="selectedRightFM"
+                      color="primary"
+                  >
+                    <v-list-item
+                        v-for="(item, i) in getMyFM"
+                        :key="i"
                     >
-                        Delete
-                    </v-btn>
-                    <v-spacer></v-spacer>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-        <v-dialog v-model="dialogArtifact" max-width="1200px" width="90vw">
-            <v-card>
-                <v-card-title class="text-h5">
-                    Analysis: {{ selectedArtifact.title }}
-                    <v-spacer></v-spacer>
-                    <v-btn icon @click="dialogArtifact = false">
-                        <v-icon> mdi-close </v-icon>
-                    </v-btn>
-                </v-card-title>
-
-                <v-card-text>
-                    <v-row class="ma-1">
-                        <v-col
-                            cols="12"
-                            :md="isRightFmSelected ? 6 : 8"
-                            :lg="isRightFmSelected ? 6 : 9"
-                            class="pa-2"
-                        >
-                            <h6 class="text-h6">{{ file.label }}</h6>
-                            <v-skeleton-loader type="card"> </v-skeleton-loader>
-                        </v-col>
-                        <v-col
-                            v-if="!isRightFmSelected"
-                            cols="12"
-                            md="4"
-                            lg="3"
-                            class="pa-2"
-                            style="border: 2px dashed grey"
-                        >
-                            <v-sheet
-                                v-if="!shouldCompare"
-                                height="300px"
-                                min-height="190px"
-                                width="100%"
-                                class="d-flex justify-center align-center pointer-on-hover"
-                                @click="compare"
-                            >
-                                <div class="text-h6 text-info text-center">
-                                    Click to compare with another feature model
-                                </div>
-                            </v-sheet>
-                            <div v-else>
-                                <v-btn
-                                    icon
-                                    @click="shouldCompare = false"
-                                    class="mr-2"
-                                >
-                                    <v-icon>mdi-arrow-left</v-icon>
-                                </v-btn>
-                                <span class="text-subtitle-1"
-                                    >My Feature Models</span
-                                >
-                                <v-progress-circular
-                                    style="display: block"
-                                    indeterminate
-                                    color="primary"
-                                    v-if="loadingComparableFM"
-                                ></v-progress-circular>
-                                <v-list
-                                    rounded
-                                    v-else
-                                    height="300px"
-                                    style="overflow-y: auto"
-                                >
-                                    <v-list-item-group
-                                        v-model="selectedRightFM"
-                                        color="primary"
-                                    >
-                                        <v-list-item
-                                            v-for="(item, i) in getMyFM"
-                                            :key="i"
-                                        >
-                                            <v-list-item-avatar>
-                                                <v-icon>
-                                                    mdi-family-tree
-                                                </v-icon>
-                                            </v-list-item-avatar>
-                                            <v-list-item-content>
-                                                <v-list-item-title>
-                                                    {{ item.label }}
-                                                </v-list-item-title>
-                                                <v-list-item-subtitle>
-                                                    {{
-                                                        new Date(
-                                                            item.uploaded_at
-                                                        ).toLocaleString(
-                                                            'en-US'
-                                                        )
-                                                    }}
-                                                </v-list-item-subtitle>
-                                            </v-list-item-content>
-                                        </v-list-item>
-                                    </v-list-item-group>
-                                </v-list>
-                            </div>
-                        </v-col>
-                        <v-col v-else cols="12" md="6" lg="6" class="pa-2">
-                            <h6 class="text-h6">
-                                <v-btn
-                                    color="inherit"
-                                    icon
-                                    @click="selectedRightFM = -1"
-                                    class="mr-2"
-                                >
-                                    <v-icon>mdi-arrow-left</v-icon>
-                                </v-btn>
-                                {{ getMyFM[selectedRightFM].label }}
-                            </h6>
-                            <v-skeleton-loader type="card"> </v-skeleton-loader>
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-            </v-card>
-        </v-dialog>
-        <tutorial-mode
-            :show="showTutorial"
-            @close="showTutorial = false"
-            :next-steps="tutorialSteps"
-            local-storage-identifier="fileDetailTutorialCompleted"
-        ></tutorial-mode>
-        <v-btn
-            id="tutorial-mode"
-            fab
-            fixed
-            right
-            bottom
-            color="primary"
-            @click="showTutorial = true"
-        >
-            <v-icon> mdi-school </v-icon>
-        </v-btn>
-    </div>
+                      <v-list-item-avatar>
+                        <v-icon>
+                          mdi-family-tree
+                        </v-icon>
+                      </v-list-item-avatar>
+                      <v-list-item-content>
+                        <v-list-item-title>
+                          {{ item.label }}
+                        </v-list-item-title>
+                        <v-list-item-subtitle>
+                          {{
+                            new Date(
+                                item.uploaded_at
+                            ).toLocaleString(
+                                'en-US'
+                            )
+                          }}
+                        </v-list-item-subtitle>
+                      </v-list-item-content>
+                    </v-list-item>
+                  </v-list-item-group>
+                </v-list>
+              </div>
+            </v-col>
+            <v-col v-else cols="12" md="6" lg="6" class="pa-2" style="border-left: 2px solid white;">
+              <h6 class="text-h6">
+                <v-btn
+                    color="inherit"
+                    icon
+                    @click="selectedRightFM = -1"
+                    class="mr-2"
+                >
+                  <v-icon>mdi-arrow-left</v-icon>
+                </v-btn>
+                {{ getMyFM[selectedRightFM].label }}
+              </h6>
+              <v-data-table
+                  v-if="selectedArtifact.title === 'CSV'"
+                  :headers="headerCsvArtifact"
+                  :items="itemsCsvArtifact"
+                  :items-per-page="10"
+              ></v-data-table>
+              <div v-else>
+                <textarea v-model="xmlFile" style="border:none; width: 100%; height: 500px; color: white">
+                </textarea>
+              </div>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+    <tutorial-mode
+        :show="showTutorial"
+        @close="showTutorial = false"
+        :next-steps="tutorialSteps"
+        local-storage-identifier="fileDetailTutorialCompleted"
+    ></tutorial-mode>
+    <v-btn
+        id="tutorial-mode"
+        fab
+        fixed
+        right
+        bottom
+        color="primary"
+        @click="showTutorial = true"
+    >
+      <v-icon> mdi-school</v-icon>
+    </v-btn>
+  </div>
 </template>
 
 <script>
@@ -521,228 +553,2627 @@ import TutorialMode from '@/components/TutorialMode';
 const API_URL = process.env.VUE_APP_DOMAIN;
 
 export default Vue.extend({
-    name: 'FileDetail',
+  name: 'FileDetail',
 
-    components: {
-        TutorialMode,
-    },
+  components: {
+    TutorialMode,
+  },
 
-    props: {},
-
-    data: () => ({
-        file: {},
-        loading: true,
-        dialogDelete: false,
-        dialogArtifact: false,
-        shouldCompare: false,
-        loadingComparableFM: false,
-        selectedRightFM: -1,
-        selectedArtifact: {},
-        rightFmIsSelected: false,
-        removeLoading: false,
-        searchAnalysis: '',
-        headersAnalysis: [
-            {
-                text: 'ID',
-                align: 'start',
-                sortable: false,
-                value: 'id',
-            },
-            { text: 'Name', value: 'name' },
-            { text: 'Query', value: 'query' },
-            { text: 'Status', value: 'status' },
-        ],
-        itemsAnalysis: [
-            {
-                id: 1,
-                name: 'first analysis',
-                query: 'count nodes',
-                status: 0,
-            },
-            {
-                id: 2,
-                name: 'complex analysis',
-                query: 'calculate purpose of life --force',
-                status: 1,
-            },
-            {
-                id: 42,
-                name: 'another analysis',
-                query: 'foo bar',
-                status: 0,
-            },
-        ],
-        showTutorial: false,
-        tutorialSteps: [
-            {
-                title: 'Welcome to the tutorial!',
-                description:
-                    'You can restart the tutorial anytime by clicking on this button.',
-                elementCssSelector: '#tutorial-mode',
-            },
-            {
-                title: 'Feature model details',
-                description:
-                    'Here you can see details and more information about the feature model. You can also view the model and the family. If you are the owner of the model, you can also edit aspects like name or description.',
-                elementCssSelector: '#feature-model-details',
-            },
-            {
-                title: 'Feature model actions',
-                description:
-                    'With those action buttons, you are able to view the model or the family, or - if you are the owner of the model - delete it.',
-                elementCssSelector: '#feature-model-actions',
-            },
-            {
-                title: 'The Analyses and progress',
-                description:
-                    "After uploading a feature model, some predefined analyses will run on them automatically. In this table you'll see those analyses as well as the progress (done, in progress, failed).",
-                elementCssSelector: '#feature-model-analysis-progress',
-            },
-            {
-                title: 'Feature model artifacts',
-                description:
-                    "In this section you'll find artifacts of the feature model. Those artifacts - which are basically files - are automatically generated after the analyses are done. You can view them here.",
-                elementCssSelector: '#feature-model-artifacts',
-            },
-        ],
-        artifacts: [
-            {
-                title: 'Binary',
-                subtitle: 'Displaying binaries of feature model',
-            },
-            {
-                title: 'Purpose of life',
-                subtitle: 'What is it even?',
-            },
-            {
-                title: 'Complex Document',
-                subtitle: 'Generated from analysis: complex analysis',
-            },
-            {
-                title: 'Final.docx',
-                subtitle: 'Test file',
-            },
-        ],
-    }),
-
-    async mounted() {
-        this.loading = true;
-        await this.getFile();
-        this.loading = false;
-        //await this.fetchFeatureModelOfFamily(this.family.id)
-    },
+  props: {},
 
-    watch: {
-        selectedRightFM: function (newValue) {
-            console.log(newValue);
-        },
-    },
+  data: () => ({
+    file: {},
+    loading: true,
+    dialogDelete: false,
+    dialogArtifact: false,
+    shouldCompare: false,
+    loadingComparableFM: false,
+    selectedRightFM: -1,
+    selectedArtifact: {},
+    rightFmIsSelected: false,
+    removeLoading: false,
+    searchAnalysis: '',
+    headersAnalysis: [
+      {
+        text: 'ID',
+        align: 'start',
+        sortable: false,
+        value: 'id',
+      },
+      {text: 'Name', value: 'name'},
+      {text: 'Query', value: 'query'},
+      {text: 'Status', value: 'status'},
+    ],
+    itemsAnalysis: [
+      {
+        id: 1,
+        name: 'first analysis',
+        query: 'count nodes',
+        status: 0,
+      },
+      {
+        id: 2,
+        name: 'complex analysis',
+        query: 'calculate purpose of life --force',
+        status: 1,
+      },
+      {
+        id: 42,
+        name: 'another analysis',
+        query: 'foo bar',
+        status: 0,
+      },
+    ],
+    showTutorial: false,
+    tutorialSteps: [
+      {
+        title: 'Welcome to the tutorial!',
+        description:
+            'You can restart the tutorial anytime by clicking on this button.',
+        elementCssSelector: '#tutorial-mode',
+      },
+      {
+        title: 'Feature model details',
+        description:
+            'Here you can see details and more information about the feature model. You can also view the model and the family. If you are the owner of the model, you can also edit aspects like name or description.',
+        elementCssSelector: '#feature-model-details',
+      },
+      {
+        title: 'Feature model actions',
+        description:
+            'With those action buttons, you are able to view the model or the family, or - if you are the owner of the model - delete it.',
+        elementCssSelector: '#feature-model-actions',
+      },
+      {
+        title: 'The Analyses and progress',
+        description:
+            "After uploading a feature model, some predefined analyses will run on them automatically. In this table you'll see those analyses as well as the progress (done, in progress, failed).",
+        elementCssSelector: '#feature-model-analysis-progress',
+      },
+      {
+        title: 'Feature model artifacts',
+        description:
+            "In this section you'll find artifacts of the feature model. Those artifacts - which are basically files - are automatically generated after the analyses are done. You can view them here.",
+        elementCssSelector: '#feature-model-artifacts',
+      },
+    ],
+    artifacts: [
+      {
+        title: 'CSV',
+        subtitle: 'Displaying CSV of feature model',
+      },
+      {
+        title: 'XML',
+        subtitle: 'Displaying XML of feature model',
+      },
+      {
+        title: 'Complex Document',
+        subtitle: 'Generated from analysis: complex analysis',
+      },
+    ],
+    headerCsvArtifact: [
+      {text: 'Input File', value: 'input_file'},
+      {text: 'Input Hash', value: 'input_hash'},
+      {text: 'SVO', value: 'svo'},
+      {text: 'DVO', value: 'dvo'},
+      {text: 'DVO Time', value: 'dvo_time'},
+      {text: 'BDD Compiler', value: 'bdd_compiler'},
+      {text: 'BDD Bootstrap', value: 'bdd_bootstrap'},
+      {text: 'BDD Compile', value: 'bdd_compile'},
+      {text: 'BDD Timeout', value: 'bdd_timeout'},
+      {text: 'BDD Size', value: 'bdd_size'},
+    ],
+    itemsCsvArtifact: [
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.006,
+        "bdd_compile": 44.813,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "",
+        "dvo_time": "",
+        "bdd_compiler": "",
+        "bdd_bootstrap": null,
+        "bdd_compile": null,
+        "bdd_timeout": null,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.008,
+        "bdd_compile": 45.037,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "",
+        "dvo_time": "",
+        "bdd_compiler": "",
+        "bdd_bootstrap": null,
+        "bdd_compile": null,
+        "bdd_timeout": null,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.01,
+        "bdd_compile": 32.266,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.006,
+        "bdd_compile": 31.951,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "",
+        "dvo_time": "",
+        "bdd_compiler": "",
+        "bdd_bootstrap": null,
+        "bdd_compile": null,
+        "bdd_timeout": null,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.006,
+        "bdd_compile": 37.242,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "",
+        "dvo_time": "",
+        "bdd_compiler": "",
+        "bdd_bootstrap": null,
+        "bdd_compile": null,
+        "bdd_timeout": null,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force",
+        "dvo": "",
+        "dvo_time": "",
+        "bdd_compiler": "",
+        "bdd_bootstrap": null,
+        "bdd_compile": null,
+        "bdd_timeout": null,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.006,
+        "bdd_compile": 36.179,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.01,
+        "bdd_compile": 34.675,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.009,
+        "bdd_compile": 46.592,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "",
+        "dvo_time": "",
+        "bdd_compiler": "",
+        "bdd_bootstrap": null,
+        "bdd_compile": null,
+        "bdd_timeout": null,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.007,
+        "bdd_compile": 40.298,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.005,
+        "bdd_compile": 44.059,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.006,
+        "bdd_compile": 36.9,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.006,
+        "bdd_compile": 41.094,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.008,
+        "bdd_compile": 35.726,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-best",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.01,
+        "bdd_compile": 27.533,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.01,
+        "bdd_compile": 32.349,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.01,
+        "bdd_compile": 41.088,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.005,
+        "bdd_compile": 34.342,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "",
+        "dvo_time": "",
+        "bdd_compiler": "",
+        "bdd_bootstrap": null,
+        "bdd_compile": null,
+        "bdd_timeout": null,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.01,
+        "bdd_compile": 30.061,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.009,
+        "bdd_compile": 35.78,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.011,
+        "bdd_compile": 36.598,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.009,
+        "bdd_compile": 36.843,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "SIFTC",
+        "dvo_time": "",
+        "bdd_compiler": "cudd",
+        "bdd_bootstrap": 0.01,
+        "bdd_compile": 31.673,
+        "bdd_timeout": false,
+        "bdd_size": ""
+      },
+      {
+        "input_file": "busybox.dimacs",
+        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
+        "svo": "force-avg",
+        "dvo": "",
+        "dvo_time": "",
+        "bdd_compiler": "",
+        "bdd_bootstrap": null,
+        "bdd_compile": null,
+        "bdd_timeout": null,
+        "bdd_size": ""
+      }
+    ],
+    xmlFile: `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<feature_model name="FeatureIDE model">
+    <feature_tree>
+:r __Root__(__Root__)
+\t:o FEATURE_INSMOD_VERSION_CHECKING(FEATURE_INSMOD_VERSION_CHECKING)
+\t:o NC_EXTRA(NC_EXTRA)
+\t:o FEATURE_SH_STANDALONE(FEATURE_SH_STANDALONE)
+\t:o STATIC(STATIC)
+\t:o FEATURE_LESS_LINENUMS(FEATURE_LESS_LINENUMS)
+\t:o RAIDAUTORUN(RAIDAUTORUN)
+\t:o GETENFORCE(GETENFORCE)
+\t:o FEATURE_CHAT_TTY_HIFI(FEATURE_CHAT_TTY_HIFI)
+\t:o HEXDUMP(HEXDUMP)
+\t:o FEATURE_MOUNT_VERBOSE(FEATURE_MOUNT_VERBOSE)
+\t:o FEATURE_FIND_INUM(FEATURE_FIND_INUM)
+\t:o EXPAND(EXPAND)
+\t:o RUNLEVEL(RUNLEVEL)
+\t:o HDPARM(HDPARM)
+\t:o INIT_TERMINAL_TYPE(INIT_TERMINAL_TYPE)
+\t:o AR(AR)
+\t:o FEATURE_EJECT_SCSI(FEATURE_EJECT_SCSI)
+\t:o SED(SED)
+\t:o SENDMAIL(SENDMAIL)
+\t:o SETFILES(SETFILES)
+\t:o FEATURE_VI_SEARCH(FEATURE_VI_SEARCH)
+\t:o SEQ(SEQ)
+\t:o FEATURE_FBSET_FANCY(FEATURE_FBSET_FANCY)
+\t:o WATCH(WATCH)
+\t:o TFTP(TFTP)
+\t:o FEATURE_TOP_SMP_PROCESS(FEATURE_TOP_SMP_PROCESS)
+\t:o HUSH_FUNCTIONS(HUSH_FUNCTIONS)
+\t:o FEATURE_CROND_DIR(FEATURE_CROND_DIR)
+\t:o FEATURE_FBSET_READMODE(FEATURE_FBSET_READMODE)
+\t:o HALT(HALT)
+\t:o INSTALL_APPLET_SCRIPT_WRAPPERS(INSTALL_APPLET_SCRIPT_WRAPPERS)
+\t:o FLASHCP(FLASHCP)
+\t:o FEATURE_WGET_TIMEOUT(FEATURE_WGET_TIMEOUT)
+\t:o BRCTL(BRCTL)
+\t:o FEATURE_DF_FANCY(FEATURE_DF_FANCY)
+\t:o CP(CP)
+\t:o FEATURE_LS_FILETYPES(FEATURE_LS_FILETYPES)
+\t:o NBDCLIENT(NBDCLIENT)
+\t:o FEATURE_ADDUSER_LONG_OPTIONS(FEATURE_ADDUSER_LONG_OPTIONS)
+\t:o FEATURE_UDHCP_PORT(FEATURE_UDHCP_PORT)
+\t:o DNSD(DNSD)
+\t:o HUSH_LOCAL(HUSH_LOCAL)
+\t:o DC(DC)
+\t:o DD(DD)
+\t:o STTY(STTY)
+\t:o DF(DF)
+\t:o UNICODE_BIDI_SUPPORT(UNICODE_BIDI_SUPPORT)
+\t:o FEATURE_TAR_TO_COMMAND(FEATURE_TAR_TO_COMMAND)
+\t:o LOAD_POLICY(LOAD_POLICY)
+\t:o TUNE2FS(TUNE2FS)
+\t:o FEATURE_FANCY_TAIL(FEATURE_FANCY_TAIL)
+\t:o IPADDR(IPADDR)
+\t:o DU(DU)
+\t:o FEATURE_SHOW_THREADS(FEATURE_SHOW_THREADS)
+\t:o FEATURE_READLINK_FOLLOW(FEATURE_READLINK_FOLLOW)
+\t:o LOGNAME(LOGNAME)
+\t:o FEATURE_FIND_PRUNE(FEATURE_FIND_PRUNE)
+\t:o INSTALL_SH_APPLET_SCRIPT_WRAPPER(INSTALL_SH_APPLET_SCRIPT_WRAPPER)
+\t:o ED(ED)
+\t:o FEATURE_TFTP_GET(FEATURE_TFTP_GET)
+\t:o MDEV(MDEV)
+\t:o HUSH_SAVEHISTORY(HUSH_SAVEHISTORY)
+\t:o NC_110_COMPAT(NC_110_COMPAT)
+\t:o FEATURE_STAT_FORMAT(FEATURE_STAT_FORMAT)
+\t:o FEATURE_XARGS_SUPPORT_TERMOPT(FEATURE_XARGS_SUPPORT_TERMOPT)
+\t:o PASSWORD_MINLEN(PASSWORD_MINLEN)
+\t:o CHROOT(CHROOT)
+\t:o SETSID(SETSID)
+\t:o FEATURE_LAST_SMALL_alt(FEATURE_LAST_SMALL_alt)
+\t:o UBIATTACH(UBIATTACH)
+\t:o FEATURE_COMPRESS_USAGE(FEATURE_COMPRESS_USAGE)
+\t:o UNLZMA(UNLZMA)
+\t:o FEATURE_HDPARM_GET_IDENTITY(FEATURE_HDPARM_GET_IDENTITY)
+\t:o FEATURE_FIND_NEWER(FEATURE_FIND_NEWER)
+\t:o TUNCTL(TUNCTL)
+\t:o FEATURE_KILL_REMOVED(FEATURE_KILL_REMOVED)
+\t:o BASENAME(BASENAME)
+\t:o MKFIFO(MKFIFO)
+\t:o UNCOMPRESS(UNCOMPRESS)
+\t:o MD5SUM(MD5SUM)
+\t:o FEATURE_LS_COLOR_IS_DEFAULT(FEATURE_LS_COLOR_IS_DEFAULT)
+\t:o UNEXPAND(UNEXPAND)
+\t:o REMOVE_SHELL(REMOVE_SHELL)
+\t:o root(root)
+\t:o FEATURE_AUTOWIDTH(FEATURE_AUTOWIDTH)
+\t:o FEATURE_MOUNT_NFS(FEATURE_MOUNT_NFS)
+\t:o HUSH_IF(HUSH_IF)
+\t:o BB_SYSCTL(BB_SYSCTL)
+\t:o FEATURE_FIND_TYPE(FEATURE_FIND_TYPE)
+\t:o FEATURE_HTTPD_SET_REMOTE_PORT_TO_ENV(FEATURE_HTTPD_SET_REMOTE_PORT_TO_ENV)
+\t:o FEATURE_MINIX2(FEATURE_MINIX2)
+\t:o FEATURE_BOOTCHARTD_BLOATED_HEADER(FEATURE_BOOTCHARTD_BLOATED_HEADER)
+\t:o TELNET(TELNET)
+\t:o FEATURE_SEAMLESS_LZMA(FEATURE_SEAMLESS_LZMA)
+\t:o FEATURE_IP_RULE(FEATURE_IP_RULE)
+\t:o HOSTNAME(HOSTNAME)
+\t:o FEATURE_HTTPD_RANGES(FEATURE_HTTPD_RANGES)
+\t:o FGCONSOLE(FGCONSOLE)
+\t:o FEATURE_FIND_GROUP(FEATURE_FIND_GROUP)
+\t:o HD(HD)
+\t:o TRACEROUTE(TRACEROUTE)
+\t:o HUSH_MODE_X(HUSH_MODE_X)
+\t:o DMALLOC_alt(DMALLOC_alt)
+\t:o FEATURE_XARGS_SUPPORT_ZERO_TERM(FEATURE_XARGS_SUPPORT_ZERO_TERM)
+\t:o FEATURE_FIND_REGEX(FEATURE_FIND_REGEX)
+\t:o UDHCPC_DEFAULT_SCRIPT(UDHCPC_DEFAULT_SCRIPT)
+\t:o MODPROBE_SMALL(MODPROBE_SMALL)
+\t:o DELUSER(DELUSER)
+\t:o FEATURE_FLOAT_SLEEP(FEATURE_FLOAT_SLEEP)
+\t:o ASH_MAIL(ASH_MAIL)
+\t:o CTTYHACK(CTTYHACK)
+\t:o SETCONSOLE(SETCONSOLE)
+\t:o FEATURE_VI_DOT_CMD(FEATURE_VI_DOT_CMD)
+\t:o BASE64(BASE64)
+\t:o FDISK(FDISK)
+\t:o UNZIP(UNZIP)
+\t:o ID(ID)
+\t:o FEATURE_DEVFS(FEATURE_DEVFS)
+\t:o NOMMU(NOMMU)
+\t:o FEATURE_VOLUMEID_FAT(FEATURE_VOLUMEID_FAT)
+\t:o FEATURE_SH_IS_HUSH_alt(FEATURE_SH_IS_HUSH_alt)
+\t:o IP(IP)
+\t:o USE_BB_PWD_GRP(USE_BB_PWD_GRP)
+\t:o FEATURE_SUID(FEATURE_SUID)
+\t:o DUMPKMAP(DUMPKMAP)
+\t:o MAN(MAN)
+\t:o FEATURE_TRACEROUTE_VERBOSE(FEATURE_TRACEROUTE_VERBOSE)
+\t:o PIVOT_ROOT(PIVOT_ROOT)
+\t:o FEATURE_NAMEIF_EXTENDED(FEATURE_NAMEIF_EXTENDED)
+\t:o FEATURE_VOLUMEID_HFS(FEATURE_VOLUMEID_HFS)
+\t:o RPM2CPIO(RPM2CPIO)
+\t:o FEATURE_VI_8BIT(FEATURE_VI_8BIT)
+\t:o MONOTONIC_SYSCALL(MONOTONIC_SYSCALL)
+\t:o FEATURE_MDEV_RENAME(FEATURE_MDEV_RENAME)
+\t:o TFTPD(TFTPD)
+\t:o FEATURE_LS_USERNAME(FEATURE_LS_USERNAME)
+\t:o PING(PING)
+\t:o INOTIFYD(INOTIFYD)
+\t:o FEATURE_IP_TUNNEL(FEATURE_IP_TUNNEL)
+\t:o START_STOP_DAEMON(START_STOP_DAEMON)
+\t:o INCLUDE_SUSv2(INCLUDE_SUSv2)
+\t:o FEATURE_LESS_MARKS(FEATURE_LESS_MARKS)
+\t:o FEATURE_MDEV_LOAD_FIRMWARE(FEATURE_MDEV_LOAD_FIRMWARE)
+\t:o FEATURE_SPLIT_FANCY(FEATURE_SPLIT_FANCY)
+\t:o SELINUX(SELINUX)
+\t:o FEATURE_TOP_DECIMALS(FEATURE_TOP_DECIMALS)
+\t:o FEATURE_VI_YANKMARK(FEATURE_VI_YANKMARK)
+\t:o GZIP(GZIP)
+\t:o FEATURE_FTP_WRITE(FEATURE_FTP_WRITE)
+\t:o LN(LN)
+\t:o MPSTAT(MPSTAT)
+\t:o LS(LS)
+\t:o RESET(RESET)
+\t:o LOGREAD(LOGREAD)
+\t:o PING6(PING6)
+\t:o UNICODE_WIDE_WCHARS(UNICODE_WIDE_WCHARS)
+\t:o FLOCK(FLOCK)
+\t:o LSATTR(LSATTR)
+\t:o FEATURE_CALL_TELINIT(FEATURE_CALL_TELINIT)
+\t:o FEATURE_INDIVIDUAL(FEATURE_INDIVIDUAL)
+\t:o LAST_SYSTEM_ID(LAST_SYSTEM_ID)
+\t:o FEATURE_TFTP_PROGRESS_BAR(FEATURE_TFTP_PROGRESS_BAR)
+\t:o FEATURE_DPKG_DEB_EXTRACT_ONLY(FEATURE_DPKG_DEB_EXTRACT_ONLY)
+\t:o READPROFILE(READPROFILE)
+\t:o UNIQ(UNIQ)
+\t:o MT(MT)
+\t:o ADDUSER(ADDUSER)
+\t:o MV(MV)
+\t:o FEATURE_NOLOGIN(FEATURE_NOLOGIN)
+\t:o WHOAMI(WHOAMI)
+\t:o FEATURE_LESS_REGEXP(FEATURE_LESS_REGEXP)
+\t:o NC(NC)
+\t:o ACPID(ACPID)
+\t:o LESS(LESS)
+\t:o CHATTR(CHATTR)
+\t:o TFTP_DEBUG(TFTP_DEBUG)
+\t:o XARGS(XARGS)
+\t:o FEATURE_WC_LARGE(FEATURE_WC_LARGE)
+\t:o FEATURE_VOLUMEID_LUKS(FEATURE_VOLUMEID_LUKS)
+\t:o BOOTCHARTD(BOOTCHARTD)
+\t:o FEATURE_LOGREAD_REDUCED_LOCKING(FEATURE_LOGREAD_REDUCED_LOCKING)
+\t:o FEATURE_VOLUMEID_UDF(FEATURE_VOLUMEID_UDF)
+\t:o TCPSVD(TCPSVD)
+\t:o FEATURE_TAB_COMPLETION(FEATURE_TAB_COMPLETION)
+\t:o FEATURE_MDEV_RENAME_REGEXP(FEATURE_MDEV_RENAME_REGEXP)
+\t:o FSCK(FSCK)
+\t:o SHA512SUM(SHA512SUM)
+\t:o EXPR(EXPR)
+\t:o OD(OD)
+\t:o DPKG_DEB(DPKG_DEB)
+\t:o FEATURE_HWIB(FEATURE_HWIB)
+\t:o MKTEMP(MKTEMP)
+\t:o WALL(WALL)
+\t:o FEATURE_FIND_PAREN(FEATURE_FIND_PAREN)
+\t:o FEATURE_TAR_AUTODETECT(FEATURE_TAR_AUTODETECT)
+\t:o ADD_SHELL(ADD_SHELL)
+\t:o FEATURE_DATE_ISOFMT(FEATURE_DATE_ISOFMT)
+\t:o FEATURE_IP_LINK(FEATURE_IP_LINK)
+\t:o PRINTENV(PRINTENV)
+\t:o SLEEP(SLEEP)
+\t:o PS(PS)
+\t:o ECHO(ECHO)
+\t:o FEATURE_VOLUMEID_REISERFS(FEATURE_VOLUMEID_REISERFS)
+\t:o SMEMCAP(SMEMCAP)
+\t:o FEATURE_SU_SYSLOG(FEATURE_SU_SYSLOG)
+\t:o FEATURE_SH_EXTRA_QUIET(FEATURE_SH_EXTRA_QUIET)
+\t:o DIRNAME(DIRNAME)
+\t:o INETD(INETD)
+\t:o READAHEAD(READAHEAD)
+\t:o NTPD(NTPD)
+\t:o FEATURE_MD5_SHA1_SUM_CHECK(FEATURE_MD5_SHA1_SUM_CHECK)
+\t:o LSUSB(LSUSB)
+\t:o FEATURE_LAST_FANCY(FEATURE_LAST_FANCY)
+\t:o FEATURE_EDITING_VI(FEATURE_EDITING_VI)
+\t:o SUM(SUM)
+\t:o FLASH_ERASEALL(FLASH_ERASEALL)
+\t:o FEATURE_BUFFERS_USE_MALLOC(FEATURE_BUFFERS_USE_MALLOC)
+\t:o IOCTL_HEX2STR_ERROR(IOCTL_HEX2STR_ERROR)
+\t:o DEFAULT_SETFONT_DIR(DEFAULT_SETFONT_DIR)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_TIME(FEATURE_INETD_SUPPORT_BUILTIN_TIME)
+\t:o MAKEMIME(MAKEMIME)
+\t:o RM(RM)
+\t:o FEATURE_TOP_CPU_USAGE_PERCENTAGE(FEATURE_TOP_CPU_USAGE_PERCENTAGE)
+\t:o FEATURE_VOLUMEID_LINUXSWAP(FEATURE_VOLUMEID_LINUXSWAP)
+\t:o FEATURE_MODUTILS_SYMBOLS(FEATURE_MODUTILS_SYMBOLS)
+\t:o HUSH_BASH_COMPAT(HUSH_BASH_COMPAT)
+\t:o FEATURE_MIME_CHARSET(FEATURE_MIME_CHARSET)
+\t:o PSCAN(PSCAN)
+\t:o RX(RX)
+\t:o SETKEYCODES(SETKEYCODES)
+\t:o FEATURE_BASH_IS_ASH(FEATURE_BASH_IS_ASH)
+\t:o CPIO(CPIO)
+\t:o FEATURE_ALLOW_EXEC(FEATURE_ALLOW_EXEC)
+\t:o FEATURE_CP_LONG_OPTIONS(FEATURE_CP_LONG_OPTIONS)
+\t:o FEATURE_IFUPDOWN_IFCONFIG_BUILTIN(FEATURE_IFUPDOWN_IFCONFIG_BUILTIN)
+\t:o SH_MATH_SUPPORT_64(SH_MATH_SUPPORT_64)
+\t:o FEATURE_VOLUMEID_CRAMFS(FEATURE_VOLUMEID_CRAMFS)
+\t:o FTPPUT(FTPPUT)
+\t:o FEATURE_VI_READONLY(FEATURE_VI_READONLY)
+\t:o FEATURE_TUNCTL_UG(FEATURE_TUNCTL_UG)
+\t:o MKFS_EXT2(MKFS_EXT2)
+\t:o ASH_OPTIMIZE_FOR_SIZE(ASH_OPTIMIZE_FOR_SIZE)
+\t:o SU(SU)
+\t:o SV(SV)
+\t:o IFCONFIG(IFCONFIG)
+\t:o FEATURE_GZIP_LONG_OPTIONS(FEATURE_GZIP_LONG_OPTIONS)
+\t:o FEATURE_ADDUSER_TO_GROUP(FEATURE_ADDUSER_TO_GROUP)
+\t:o PRINTF(PRINTF)
+\t:o SWAPONOFF(SWAPONOFF)
+\t:o UPTIME(UPTIME)
+\t:o FEATURE_INSMOD_LOADINKMEM(FEATURE_INSMOD_LOADINKMEM)
+\t:o FEATURE_RUNCON_LONG_OPTIONS(FEATURE_RUNCON_LONG_OPTIONS)
+\t:o FEATURE_DC_LIBM(FEATURE_DC_LIBM)
+\t:o TR(TR)
+\t:o FEATURE_LOADFONT_RAW(FEATURE_LOADFONT_RAW)
+\t:o FEATURE_SORT_BIG(FEATURE_SORT_BIG)
+\t:o FEATURE_EDITING_MAX_LEN(FEATURE_EDITING_MAX_LEN)
+\t:o FEATURE_TRACEROUTE_USE_ICMP(FEATURE_TRACEROUTE_USE_ICMP)
+\t:o FEATURE_HDPARM_HDIO_UNREGISTER_HWIF(FEATURE_HDPARM_HDIO_UNREGISTER_HWIF)
+\t:o FEATURE_BUFFERS_GO_IN_BSS_alt(FEATURE_BUFFERS_GO_IN_BSS_alt)
+\t:o VOLUMEID(VOLUMEID)
+\t:o SETLOGCONS(SETLOGCONS)
+\t:o FEATURE_LS_FOLLOWLINKS(FEATURE_LS_FOLLOWLINKS)
+\t:o FEATURE_HTTPD_CONFIG_WITH_SCRIPT_INTERPR(FEATURE_HTTPD_CONFIG_WITH_SCRIPT_INTERPR)
+\t:o DEFAULT_MODULES_DIR(DEFAULT_MODULES_DIR)
+\t:o NANDWRITE(NANDWRITE)
+\t:o FEATURE_BOOTCHARTD_CONFIG_FILE(FEATURE_BOOTCHARTD_CONFIG_FILE)
+\t:o FEATURE_HTTPD_AUTH_MD5(FEATURE_HTTPD_AUTH_MD5)
+\t:o FEATURE_IPCALC_FANCY(FEATURE_IPCALC_FANCY)
+\t:o LOADFONT(LOADFONT)
+\t:o FEATURE_TELNETD_STANDALONE(FEATURE_TELNETD_STANDALONE)
+\t:o FEATURE_DATE_COMPAT(FEATURE_DATE_COMPAT)
+\t:o FEATURE_CHAT_SEND_ESCAPES(FEATURE_CHAT_SEND_ESCAPES)
+\t:o PASSWD(PASSWD)
+\t:o FEATURE_SU_CHECKS_SHELLS(FEATURE_SU_CHECKS_SHELLS)
+\t:o IFUPDOWN(IFUPDOWN)
+\t:o NMETER(NMETER)
+\t:o MATCHPATHCON(MATCHPATHCON)
+\t:o VI(VI)
+\t:o SESTATUS(SESTATUS)
+\t:o SETFONT(SETFONT)
+\t:o LAST(LAST)
+\t:o ARPING(ARPING)
+\t:o SYNC(SYNC)
+\t:o FEATURE_TELNET_TTYPE(FEATURE_TELNET_TTYPE)
+\t:o FEATURE_TFTP_BLOCKSIZE(FEATURE_TFTP_BLOCKSIZE)
+\t:o RESTORECON(RESTORECON)
+\t:o INSTALL_APPLET_DONT(INSTALL_APPLET_DONT)
+\t:o WC(WC)
+\t:o FEATURE_MOUNT_FLAGS(FEATURE_MOUNT_FLAGS)
+\t:o SHA256SUM(SHA256SUM)
+\t:o FEATURE_TELNETD_INETD_WAIT(FEATURE_TELNETD_INETD_WAIT)
+\t:o FEATURE_ADDGROUP_LONG_OPTIONS(FEATURE_ADDGROUP_LONG_OPTIONS)
+\t:o FEATURE_DIFF_LONG_OPTIONS(FEATURE_DIFF_LONG_OPTIONS)
+\t:o FEATURE_PS_WIDE(FEATURE_PS_WIDE)
+\t:o FEATURE_START_STOP_DAEMON_FANCY(FEATURE_START_STOP_DAEMON_FANCY)
+\t:o FEATURE_LS_RECURSIVE(FEATURE_LS_RECURSIVE)
+\t:o FEATURE_GREP_FGREP_ALIAS(FEATURE_GREP_FGREP_ALIAS)
+\t:o TIME(TIME)
+\t:o FEATURE_IP_SHORT_FORMS(FEATURE_IP_SHORT_FORMS)
+\t:o CRYPTPW(CRYPTPW)
+\t:o FEATURE_MOUNT_HELPERS(FEATURE_MOUNT_HELPERS)
+\t:o BUNZIP2(BUNZIP2)
+\t:o HUSH_CASE(HUSH_CASE)
+\t:o SYSLOGD(SYSLOGD)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_ECHO(FEATURE_INETD_SUPPORT_BUILTIN_ECHO)
+\t:o GREP(GREP)
+\t:o SOFTLIMIT(SOFTLIMIT)
+\t:o FEATURE_2_4_MODULES(FEATURE_2_4_MODULES)
+\t:o FALSE(FALSE)
+\t:o FEATURE_VI_ASK_TERMINAL(FEATURE_VI_ASK_TERMINAL)
+\t:o FEATURE_IFUPDOWN_EXTERNAL_DHCP(FEATURE_IFUPDOWN_EXTERNAL_DHCP)
+\t:o FEATURE_SUID_CONFIG(FEATURE_SUID_CONFIG)
+\t:o FEATURE_WTMP(FEATURE_WTMP)
+\t:o XZ(XZ)
+\t:o CKSUM(CKSUM)
+\t:o FEATURE_SH_NOFORK(FEATURE_SH_NOFORK)
+\t:o FEATURE_TAR_OLDSUN_COMPATIBILITY(FEATURE_TAR_OLDSUN_COMPATIBILITY)
+\t:o FEATURE_CHCON_LONG_OPTIONS(FEATURE_CHCON_LONG_OPTIONS)
+\t:o LOGIN(LOGIN)
+\t:o IPCRM(IPCRM)
+\t:o FLASH_UNLOCK(FLASH_UNLOCK)
+\t:o FEATURE_SGI_LABEL(FEATURE_SGI_LABEL)
+\t:o FEATURE_FANCY_HEAD(FEATURE_FANCY_HEAD)
+\t:o FEATURE_MODPROBE_SMALL_CHECK_ALREADY_LOADED(FEATURE_MODPROBE_SMALL_CHECK_ALREADY_LOADED)
+\t:o SV_DEFAULT_SERVICE_DIR(SV_DEFAULT_SERVICE_DIR)
+\t:o FEATURE_EDITING_SAVEHISTORY(FEATURE_EDITING_SAVEHISTORY)
+\t:o VCONFIG(VCONFIG)
+\t:o SCRIPTREPLAY(SCRIPTREPLAY)
+\t:o FEATURE_CLEAN_UP(FEATURE_CLEAN_UP)
+\t:o FEATURE_INSMOD_TRY_MMAP(FEATURE_INSMOD_TRY_MMAP)
+\t:o FEATURE_BASH_IS_HUSH(FEATURE_BASH_IS_HUSH)
+\t:o FEATURE_INITRD(FEATURE_INITRD)
+\t:o FEATURE_ENV_LONG_OPTIONS(FEATURE_ENV_LONG_OPTIONS)
+\t:o FEATURE_HEXDUMP_REVERSE(FEATURE_HEXDUMP_REVERSE)
+\t:o FEATURE_FIND_LINKS(FEATURE_FIND_LINKS)
+\t:o CHAT(CHAT)
+\t:o LENGTH(LENGTH)
+\t:o FEATURE_MKSWAP_UUID(FEATURE_MKSWAP_UUID)
+\t:o FEATURE_IFCONFIG_BROADCAST_PLUS(FEATURE_IFCONFIG_BROADCAST_PLUS)
+\t:o EFENCE(EFENCE)
+\t:o FEATURE_HWCLOCK_LONG_OPTIONS(FEATURE_HWCLOCK_LONG_OPTIONS)
+\t:o FEATURE_MODPROBE_BLACKLIST(FEATURE_MODPROBE_BLACKLIST)
+\t:o FEATURE_CHAT_SWALLOW_OPTS(FEATURE_CHAT_SWALLOW_OPTS)
+\t:o FEATURE_SH_IS_HUSH(FEATURE_SH_IS_HUSH)
+\t:o MSH(MSH)
+\t:o FEATURE_FIND_USER(FEATURE_FIND_USER)
+\t:o FEATURE_UDHCPD_WRITE_LEASES_EARLY(FEATURE_UDHCPD_WRITE_LEASES_EARLY)
+\t:o FEATURE_CROND_CALL_SENDMAIL(FEATURE_CROND_CALL_SENDMAIL)
+\t:o FEATURE_BRCTL_SHOW(FEATURE_BRCTL_SHOW)
+\t:o FEATURE_AIX_LABEL(FEATURE_AIX_LABEL)
+\t:o KBD_MODE(KBD_MODE)
+\t:o FEATURE_VOLUMEID_SYSV(FEATURE_VOLUMEID_SYSV)
+\t:o MORE(MORE)
+\t:o TAC(TAC)
+\t:o UNXZ(UNXZ)
+\t:o KILL(KILL)
+\t:o CATV(CATV)
+\t:o FEATURE_CHAT_IMPLICIT_CR(FEATURE_CHAT_IMPLICIT_CR)
+\t:o INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt(INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_DISCARD(FEATURE_INETD_SUPPORT_BUILTIN_DISCARD)
+\t:o FEATURE_CPIO_P(FEATURE_CPIO_P)
+\t:o TAR(TAR)
+\t:o FEATURE_CPIO_O(FEATURE_CPIO_O)
+\t:o ASH_CMDCMD(ASH_CMDCMD)
+\t:o DEBUG_PESSIMIZE(DEBUG_PESSIMIZE)
+\t:o HUSH_JOB(HUSH_JOB)
+\t:o RTCWAKE(RTCWAKE)
+\t:o UNICODE_NEUTRAL_TABLE(UNICODE_NEUTRAL_TABLE)
+\t:o FEATURE_LOADFONT_PSF2(FEATURE_LOADFONT_PSF2)
+\t:o FEATURE_FIND_MAXDEPTH(FEATURE_FIND_MAXDEPTH)
+\t:o FREERAMDISK(FREERAMDISK)
+\t:o FEATURE_TEE_USE_BLOCK_IO(FEATURE_TEE_USE_BLOCK_IO)
+\t:o MKSWAP(MKSWAP)
+\t:o FEATURE_PS_ADDITIONAL_COLUMNS(FEATURE_PS_ADDITIONAL_COLUMNS)
+\t:o HOSTID(HOSTID)
+\t:o FEATURE_TAR_OLDGNU_COMPATIBILITY(FEATURE_TAR_OLDGNU_COMPATIBILITY)
+\t:o RDATE(RDATE)
+\t:o RUNCON(RUNCON)
+\t:o CHPASSWD(CHPASSWD)
+\t:o LSMOD(LSMOD)
+\t:o CAL(CAL)
+\t:o MODPROBE(MODPROBE)
+\t:o IPROUTE(IPROUTE)
+\t:o LAST_SUPPORTED_WCHAR(LAST_SUPPORTED_WCHAR)
+\t:o FEATURE_EXTRA_QUIET(FEATURE_EXTRA_QUIET)
+\t:o LZOP_COMPR_HIGH(LZOP_COMPR_HIGH)
+\t:o PREFIX(PREFIX)
+\t:o UNICODE_USING_LOCALE(UNICODE_USING_LOCALE)
+\t:o CAT(CAT)
+\t:o INSTALL_SH_APPLET_HARDLINK(INSTALL_SH_APPLET_HARDLINK)
+\t:o FEATURE_IFCONFIG_HW(FEATURE_IFCONFIG_HW)
+\t:o FEATURE_UTMP(FEATURE_UTMP)
+\t:o HAVE_DOT_CONFIG(HAVE_DOT_CONFIG)
+\t:o FEATURE_ROTATE_LOGFILE(FEATURE_ROTATE_LOGFILE)
+\t:o FEATURE_FIND_PATH(FEATURE_FIND_PATH)
+\t:o FEATURE_RUNSVDIR_LOG(FEATURE_RUNSVDIR_LOG)
+\t:o FEATURE_DIFF_DIR(FEATURE_DIFF_DIR)
+\t:o FEATURE_SHADOWPASSWDS(FEATURE_SHADOWPASSWDS)
+\t:o LOGIN_SCRIPTS(LOGIN_SCRIPTS)
+\t:o SLATTACH(SLATTACH)
+\t:o FEATURE_AR_CREATE(FEATURE_AR_CREATE)
+\t:o FEATURE_DD_SIGNAL_HANDLING(FEATURE_DD_SIGNAL_HANDLING)
+\t:o FEATURE_SYSLOG(FEATURE_SYSLOG)
+\t:o TOUCH(TOUCH)
+\t:o FSYNC(FSYNC)
+\t:o FEATURE_MOUNT_LABEL(FEATURE_MOUNT_LABEL)
+\t:o FEATURE_SUID_CONFIG_QUIET(FEATURE_SUID_CONFIG_QUIET)
+\t:o ENVUIDGID(ENVUIDGID)
+\t:o FEATURE_VI_WIN_RESIZE(FEATURE_VI_WIN_RESIZE)
+\t:o ASH_RANDOM_SUPPORT(ASH_RANDOM_SUPPORT)
+\t:o DOS2UNIX(DOS2UNIX)
+\t:o IPCS(IPCS)
+\t:o TEE(TEE)
+\t:o FEATURE_HTTPD_USE_SENDFILE(FEATURE_HTTPD_USE_SENDFILE)
+\t:o RUNSVDIR(RUNSVDIR)
+\t:o FEATURE_USE_TERMIOS(FEATURE_USE_TERMIOS)
+\t:o FEATURE_LESS_WINCH(FEATURE_LESS_WINCH)
+\t:o CHPST(CHPST)
+\t:o CROSS_COMPILER_PREFIX(CROSS_COMPILER_PREFIX)
+\t:o FEATURE_EDITING(FEATURE_EDITING)
+\t:o HUSH(HUSH)
+\t:o SVLOGD(SVLOGD)
+\t:o IFENSLAVE(IFENSLAVE)
+\t:o ASH_BUILTIN_ECHO(ASH_BUILTIN_ECHO)
+\t:o SETSEBOOL(SETSEBOOL)
+\t:o FEATURE_MAKEDEVS_TABLE(FEATURE_MAKEDEVS_TABLE)
+\t:o FEATURE_HTTPD_ERROR_PAGES(FEATURE_HTTPD_ERROR_PAGES)
+\t:o FEATURE_VOLUMEID_LINUXRAID(FEATURE_VOLUMEID_LINUXRAID)
+\t:o PIDOF(PIDOF)
+\t:o FEATURE_KILL_DELAY(FEATURE_KILL_DELAY)
+\t:o NSLOOKUP(NSLOOKUP)
+\t:o FEATURE_XARGS_SUPPORT_QUOTES(FEATURE_XARGS_SUPPORT_QUOTES)
+\t:o FEATURE_IPCALC_LONG_OPTIONS(FEATURE_IPCALC_LONG_OPTIONS)
+\t:o FEATURE_PIDOF_OMIT(FEATURE_PIDOF_OMIT)
+\t:o GUNZIP(GUNZIP)
+\t:o FEATURE_TR_CLASSES(FEATURE_TR_CLASSES)
+\t:o FOLD(FOLD)
+\t:o UNICODE_PRESERVE_BROKEN(UNICODE_PRESERVE_BROKEN)
+\t:o ASH_BASH_COMPAT(ASH_BASH_COMPAT)
+\t:o DIFF(DIFF)
+\t:o FEATURE_FDISK_WRITABLE(FEATURE_FDISK_WRITABLE)
+\t:o MKNOD(MKNOD)
+\t:o SHOWKEY(SHOWKEY)
+\t:o LOCALE_SUPPORT(LOCALE_SUPPORT)
+\t:o FEATURE_SEAMLESS_BZ2(FEATURE_SEAMLESS_BZ2)
+\t:o KLOGD(KLOGD)
+\t:o BEEP(BEEP)
+\t:o GETTY(GETTY)
+\t:o FSCK_MINIX(FSCK_MINIX)
+\t:o FEATURE_GREP_CONTEXT(FEATURE_GREP_CONTEXT)
+\t:o NAMEIF(NAMEIF)
+\t:o FEATURE_HTTPD_SETUID(FEATURE_HTTPD_SETUID)
+\t:o FEATURE_LZMA_FAST(FEATURE_LZMA_FAST)
+\t:o FEATURE_MAKEDEVS_TABLE_alt(FEATURE_MAKEDEVS_TABLE_alt)
+\t:o EXTRA_CFLAGS(EXTRA_CFLAGS)
+\t:o FIRST_SYSTEM_ID(FIRST_SYSTEM_ID)
+\t:o FEATURE_VOLUMEID_OCFS2(FEATURE_VOLUMEID_OCFS2)
+\t:o FEATURE_BASH_IS_HUSH_alt(FEATURE_BASH_IS_HUSH_alt)
+\t:o PLATFORM_LINUX(PLATFORM_LINUX)
+\t:o UNIX2DOS(UNIX2DOS)
+\t:o FEATURE_XARGS_SUPPORT_CONFIRMATION(FEATURE_XARGS_SUPPORT_CONFIRMATION)
+\t:o FEATURE_REFORMIME_COMPAT(FEATURE_REFORMIME_COMPAT)
+\t:o FEATURE_INIT_SYSLOG(FEATURE_INIT_SYSLOG)
+\t:o FEATURE_AR_LONG_FILENAMES(FEATURE_AR_LONG_FILENAMES)
+\t:o EXPR_MATH_SUPPORT_64(EXPR_MATH_SUPPORT_64)
+\t:o FEATURE_INSTALLER(FEATURE_INSTALLER)
+\t:o FEATURE_FIND_MMIN(FEATURE_FIND_MMIN)
+\t:o FEATURE_FIND_PRINT0(FEATURE_FIND_PRINT0)
+\t:o DESKTOP(DESKTOP)
+\t:o DMALLOC(DMALLOC)
+\t:o READLINK(READLINK)
+\t:o TAIL(TAIL)
+\t:o RFKILL(RFKILL)
+\t:o HUSH_TICK(HUSH_TICK)
+\t:o PAM(PAM)
+\t:o ASH_BUILTIN_PRINTF(ASH_BUILTIN_PRINTF)
+\t:o REV(REV)
+\t:o FEATURE_FIND_PERM(FEATURE_FIND_PERM)
+\t:o FEATURE_USERNAME_COMPLETION(FEATURE_USERNAME_COMPLETION)
+\t:o IONICE(IONICE)
+\t:o UNICODE_COMBINING_WCHARS(UNICODE_COMBINING_WCHARS)
+\t:o FEATURE_GREP_EGREP_ALIAS(FEATURE_GREP_EGREP_ALIAS)
+\t:o FEATURE_DD_IBS_OBS(FEATURE_DD_IBS_OBS)
+\t:o FEATURE_IP_ADDRESS(FEATURE_IP_ADDRESS)
+\t:o SELINUXENABLED(SELINUXENABLED)
+\t:o FEATURE_LAST_SMALL(FEATURE_LAST_SMALL)
+\t:o FEATURE_FIND_DELETE(FEATURE_FIND_DELETE)
+\t:o CROND(CROND)
+\t:o HTTPD(HTTPD)
+\t:o PATCH(PATCH)
+\t:o FEATURE_FIND_CONTEXT(FEATURE_FIND_CONTEXT)
+\t:o FEATURE_FTPGETPUT_LONG_OPTIONS(FEATURE_FTPGETPUT_LONG_OPTIONS)
+\t:o UNAME(UNAME)
+\t:o FEATURE_PREFER_IPV4_ADDRESS(FEATURE_PREFER_IPV4_ADDRESS)
+\t:o TEST(TEST)
+\t:o FEATURE_BASH_IS_NONE(FEATURE_BASH_IS_NONE)
+\t:o IPLINK(IPLINK)
+\t:o STRINGS(STRINGS)
+\t:o FEATURE_UNIX_LOCAL(FEATURE_UNIX_LOCAL)
+\t:o ENV(ENV)
+\t:o FEATURE_FIND_DEPTH(FEATURE_FIND_DEPTH)
+\t:o FEATURE_ACPID_COMPAT(FEATURE_ACPID_COMPAT)
+\t:o FEATURE_BEEP_LENGTH_MS(FEATURE_BEEP_LENGTH_MS)
+\t:o IFPLUGD(IFPLUGD)
+\t:o HUSH_EXPORT_N(HUSH_EXPORT_N)
+\t:o FEATURE_VERBOSE_USAGE(FEATURE_VERBOSE_USAGE)
+\t:o FEATURE_VERBOSE_CP_MESSAGE(FEATURE_VERBOSE_CP_MESSAGE)
+\t:o UUENCODE(UUENCODE)
+\t:o FEATURE_HTTPD_BASIC_AUTH(FEATURE_HTTPD_BASIC_AUTH)
+\t:o FEATURE_INSMOD_KSYMOOPS_SYMBOLS(FEATURE_INSMOD_KSYMOOPS_SYMBOLS)
+\t:o FEATURE_DATE_NANO(FEATURE_DATE_NANO)
+\t:o FEATURE_IP_ROUTE(FEATURE_IP_ROUTE)
+\t:o RMDIR(RMDIR)
+\t:o FEATURE_NTPD_SERVER(FEATURE_NTPD_SERVER)
+\t:o FEATURE_IP_RARE_PROTOCOLS(FEATURE_IP_RARE_PROTOCOLS)
+\t:o MAKEDEVS(MAKEDEVS)
+\t:o FEATURE_MODUTILS_ALIAS(FEATURE_MODUTILS_ALIAS)
+\t:o FEATURE_SETFILES_CHECK_OPTION(FEATURE_SETFILES_CHECK_OPTION)
+\t:o USE_BB_SHADOW(USE_BB_SHADOW)
+\t:o FEATURE_IFCONFIG_SLIP(FEATURE_IFCONFIG_SLIP)
+\t:o FEATURE_INSMOD_LOAD_MAP_FULL(FEATURE_INSMOD_LOAD_MAP_FULL)
+\t:o FEATURE_PASSWD_WEAK_CHECK(FEATURE_PASSWD_WEAK_CHECK)
+\t:o IFUPDOWN_UDHCPC_CMD_OPTIONS(IFUPDOWN_UDHCPC_CMD_OPTIONS)
+\t:o CHCON(CHCON)
+\t:o FEATURE_MODPROBE_SMALL_OPTIONS_ON_CMDLINE(FEATURE_MODPROBE_SMALL_OPTIONS_ON_CMDLINE)
+\t:o FUSER(FUSER)
+\t:o FEATURE_SH_IS_ASH(FEATURE_SH_IS_ASH)
+\t:o NO_DEBUG_LIB(NO_DEBUG_LIB)
+\t:o FEATURE_HUMAN_READABLE(FEATURE_HUMAN_READABLE)
+\t:o WHICH(WHICH)
+\t:o FEATURE_FAST_TOP(FEATURE_FAST_TOP)
+\t:o FEATURE_SEAMLESS_XZ(FEATURE_SEAMLESS_XZ)
+\t:o CMP(CMP)
+\t:o FEATURE_UDHCP_RFC3397(FEATURE_UDHCP_RFC3397)
+\t:o WATCHDOG(WATCHDOG)
+\t:o FEATURE_VOLUMEID_NTFS(FEATURE_VOLUMEID_NTFS)
+\t:o INIT(INIT)
+\t:o INSTALL_APPLET_DONT_alt(INSTALL_APPLET_DONT_alt)
+\t:o KILLALL(KILLALL)
+\t:o TOP(TOP)
+\t:o FEATURE_IFUPDOWN_IPV6(FEATURE_IFUPDOWN_IPV6)
+\t:o HWCLOCK(HWCLOCK)
+\t:o GETSEBOOL(GETSEBOOL)
+\t:o FEATURE_IFUPDOWN_IPV4(FEATURE_IFUPDOWN_IPV4)
+\t:o TIMEOUT(TIMEOUT)
+\t:o FEATURE_DMESG_PRETTY(FEATURE_DMESG_PRETTY)
+\t:o FEATURE_POPMAILDIR_DELIVERY(FEATURE_POPMAILDIR_DELIVERY)
+\t:o FEATURE_CHAT_CLR_ABORT(FEATURE_CHAT_CLR_ABORT)
+\t:o EXTRA_COMPAT(EXTRA_COMPAT)
+\t:o FEATURE_HWCLOCK_ADJTIME_FHS(FEATURE_HWCLOCK_ADJTIME_FHS)
+\t:o FEATURE_UMOUNT_ALL(FEATURE_UMOUNT_ALL)
+\t:o INSMOD(INSMOD)
+\t:o FEATURE_MV_LONG_OPTIONS(FEATURE_MV_LONG_OPTIONS)
+\t:o FEATURE_DD_THIRD_STATUS_LINE(FEATURE_DD_THIRD_STATUS_LINE)
+\t:o LOSETUP(LOSETUP)
+\t:o FEATURE_TFTP_PUT(FEATURE_TFTP_PUT)
+\t:o IOSTAT(IOSTAT)
+\t:o FEATURE_TOP_CPU_GLOBAL_PERCENTS(FEATURE_TOP_CPU_GLOBAL_PERCENTS)
+\t:o FEATURE_START_STOP_DAEMON_LONG_OPTIONS(FEATURE_START_STOP_DAEMON_LONG_OPTIONS)
+\t:o PIE(PIE)
+\t:o DHCPD_LEASES_FILE(DHCPD_LEASES_FILE)
+\t:o FEATURE_KLOGD_KLOGCTL(FEATURE_KLOGD_KLOGCTL)
+\t:o CHRT(CHRT)
+\t:o FEATURE_VOLUMEID_XFS(FEATURE_VOLUMEID_XFS)
+\t:o FEATURE_HDPARM_HDIO_TRISTATE_HWIF(FEATURE_HDPARM_HDIO_TRISTATE_HWIF)
+\t:o TELNETD(TELNETD)
+\t:o MODINFO(MODINFO)
+\t:o FEATURE_MAKEDEVS_LEAF(FEATURE_MAKEDEVS_LEAF)
+\t:o FEATURE_IPC_SYSLOG_BUFFER_SIZE(FEATURE_IPC_SYSLOG_BUFFER_SIZE)
+\t:o UBIDETACH(UBIDETACH)
+\t:o FEATURE_SECURETTY(FEATURE_SECURETTY)
+\t:o CHGRP(CHGRP)
+\t:o DEVFSD_VERBOSE(DEVFSD_VERBOSE)
+\t:o FEATURE_NETSTAT_PRG(FEATURE_NETSTAT_PRG)
+\t:o FIND(FIND)
+\t:o LSPCI(LSPCI)
+\t:o FEATURE_HDPARM_HDIO_GETSET_DMA(FEATURE_HDPARM_HDIO_GETSET_DMA)
+\t:o TRUE(TRUE)
+\t:o FEATURE_LESS_MAXLINES(FEATURE_LESS_MAXLINES)
+\t:o UMOUNT(UMOUNT)
+\t:o REALPATH(REALPATH)
+\t:o KILLALL5(KILLALL5)
+\t:o SCRIPT(SCRIPT)
+\t:o SORT(SORT)
+\t:o BBCONFIG(BBCONFIG)
+\t:o IPRULE(IPRULE)
+\t:o VERBOSE_RESOLUTION_ERRORS(VERBOSE_RESOLUTION_ERRORS)
+\t:o HEAD(HEAD)
+\t:o VOLNAME(VOLNAME)
+\t:o MESG(MESG)
+\t:o MD5_SIZE_VS_SPEED(MD5_SIZE_VS_SPEED)
+\t:o FEATURE_INIT_SCTTY(FEATURE_INIT_SCTTY)
+\t:o RPM(RPM)
+\t:o TTY(TTY)
+\t:o BLKID(BLKID)
+\t:o FEATURE_VI_OPTIMIZE_CURSOR(FEATURE_VI_OPTIMIZE_CURSOR)
+\t:o FEATURE_BUFFERS_GO_IN_BSS(FEATURE_BUFFERS_GO_IN_BSS)
+\t:o OPENVT(OPENVT)
+\t:o FEATURE_EDITING_HISTORY(FEATURE_EDITING_HISTORY)
+\t:o HUSH_INTERACTIVE(HUSH_INTERACTIVE)
+\t:o FEATURE_SHARED_BUSYBOX(FEATURE_SHARED_BUSYBOX)
+\t:o DEBUG(DEBUG)
+\t:o FEATURE_TEST_64(FEATURE_TEST_64)
+\t:o FEATURE_INIT_COREDUMPS(FEATURE_INIT_COREDUMPS)
+\t:o FEATURE_TAR_SELINUX(FEATURE_TAR_SELINUX)
+\t:o FEATURE_INETD_RPC(FEATURE_INETD_RPC)
+\t:o NETSTAT(NETSTAT)
+\t:o DEVFSD_FG_NP(DEVFSD_FG_NP)
+\t:o FEATURE_VI_COLON(FEATURE_VI_COLON)
+\t:o CHVT(CHVT)
+\t:o CLEAR(CLEAR)
+\t:o FBSET(FBSET)
+\t:o FEATURE_RUN_PARTS_FANCY(FEATURE_RUN_PARTS_FANCY)
+\t:o INSTALL(INSTALL)
+\t:o FEATURE_SWAPON_PRI(FEATURE_SWAPON_PRI)
+\t:o FEATURE_IFUPDOWN_IP_BUILTIN(FEATURE_IFUPDOWN_IP_BUILTIN)
+\t:o FEATURE_TAR_UNAME_GNAME(FEATURE_TAR_UNAME_GNAME)
+\t:o FEATURE_VI_MAX_LEN(FEATURE_VI_MAX_LEN)
+\t:o SETENFORCE(SETENFORCE)
+\t:o FEATURE_CHAT_VAR_ABORT_LEN(FEATURE_CHAT_VAR_ABORT_LEN)
+\t:o SWITCH_ROOT(SWITCH_ROOT)
+\t:o FEATURE_IFCONFIG_MEMSTART_IOADDR_IRQ(FEATURE_IFCONFIG_MEMSTART_IOADDR_IRQ)
+\t:o FEATURE_USE_INITTAB(FEATURE_USE_INITTAB)
+\t:o FEATURE_VOLUMEID_ISO9660(FEATURE_VOLUMEID_ISO9660)
+\t:o NANDDUMP(NANDDUMP)
+\t:o MOUNTPOINT(MOUNTPOINT)
+\t:o INSTALL_SH_APPLET_SYMLINK(INSTALL_SH_APPLET_SYMLINK)
+\t:o LFS(LFS)
+\t:o FDFLUSH(FDFLUSH)
+\t:o FEATURE_SH_IS_NONE(FEATURE_SH_IS_NONE)
+\t:o SULOGIN(SULOGIN)
+\t:o ASH_EXPAND_PRMT(ASH_EXPAND_PRMT)
+\t:o CUT(CUT)
+\t:o FEATURE_RMDIR_LONG_OPTIONS(FEATURE_RMDIR_LONG_OPTIONS)
+\t:o FEATURE_TAR_NOPRESERVE_TIME(FEATURE_TAR_NOPRESERVE_TIME)
+\t:o CONSPY(CONSPY)
+\t:o FEATURE_FIND_EXEC(FEATURE_FIND_EXEC)
+\t:o FEATURE_CROND_D(FEATURE_CROND_D)
+\t:o IFUPDOWN_IFSTATE_PATH(IFUPDOWN_IFSTATE_PATH)
+\t:o FEATURE_TR_EQUIV(FEATURE_TR_EQUIV)
+\t:o FEATURE_SETFONT_TEXTUAL_MAP(FEATURE_SETFONT_TEXTUAL_MAP)
+\t:o SUBST_WCHAR(SUBST_WCHAR)
+\t:o MKFS_VFAT(MKFS_VFAT)
+\t:o FEATURE_FIND_XDEV(FEATURE_FIND_XDEV)
+\t:o FEATURE_MOUNT_LOOP_CREATE(FEATURE_MOUNT_LOOP_CREATE)
+\t:o FEATURE_RUN_PARTS_LONG_OPTIONS(FEATURE_RUN_PARTS_LONG_OPTIONS)
+\t:o ZCIP(ZCIP)
+\t:o FEATURE_HTTPD_PROXY(FEATURE_HTTPD_PROXY)
+\t:o FEATURE_BUFFERS_GO_ON_STACK(FEATURE_BUFFERS_GO_ON_STACK)
+\t:o FEATURE_IPV6(FEATURE_IPV6)
+\t:o ARP(ARP)
+\t:o FEATURE_TOP_SMP_CPU(FEATURE_TOP_SMP_CPU)
+\t:o USLEEP(USLEEP)
+\t:o LOADKMAP(LOADKMAP)
+\t:o RDEV(RDEV)
+\t:o FEATURE_MDEV_CONF(FEATURE_MDEV_CONF)
+\t:o FREE(FREE)
+\t:o SPLIT(SPLIT)
+\t:o FEATURE_PIDOF_SINGLE(FEATURE_PIDOF_SINGLE)
+\t:o ASH(ASH)
+\t:o USE_PORTABLE_CODE(USE_PORTABLE_CODE)
+\t:o FEATURE_SYSLOGD_DUP(FEATURE_SYSLOGD_DUP)
+\t:o FEATURE_LESS_FLAGS(FEATURE_LESS_FLAGS)
+\t:o MKFS_MINIX(MKFS_MINIX)
+\t:o FEATURE_VOLUMEID_EXT(FEATURE_VOLUMEID_EXT)
+\t:o VLOCK(VLOCK)
+\t:o DEVMEM(DEVMEM)
+\t:o TELINIT_PATH(TELINIT_PATH)
+\t:o RMMOD(RMMOD)
+\t:o DEVFSD_MODLOAD(DEVFSD_MODLOAD)
+\t:o FEATURE_COMPRESS_BBCONFIG(FEATURE_COMPRESS_BBCONFIG)
+\t:o FEATURE_LS_TIMESTAMPS(FEATURE_LS_TIMESTAMPS)
+\t:o FEATURE_EXPAND_LONG_OPTIONS(FEATURE_EXPAND_LONG_OPTIONS)
+\t:o FEATURE_HTTPD_GZIP(FEATURE_HTTPD_GZIP)
+\t:o MKDIR(MKDIR)
+\t:o FEATURE_IFUPDOWN_MAPPING(FEATURE_IFUPDOWN_MAPPING)
+\t:o FEATURE_FIND_MTIME(FEATURE_FIND_MTIME)
+\t:o FEATURE_IPC_SYSLOG(FEATURE_IPC_SYSLOG)
+\t:o STAT(STAT)
+\t:o FEATURE_AWK_LIBM(FEATURE_AWK_LIBM)
+\t:o ROUTE(ROUTE)
+\t:o GETOPT(GETOPT)
+\t:o CRONTAB(CRONTAB)
+\t:o FTPGET(FTPGET)
+\t:o FEATURE_SETCONSOLE_LONG_OPTIONS(FEATURE_SETCONSOLE_LONG_OPTIONS)
+\t:o FEATURE_HTTPD_CGI(FEATURE_HTTPD_CGI)
+\t:o FDFORMAT(FDFORMAT)
+\t:o FEATURE_FANCY_ECHO(FEATURE_FANCY_ECHO)
+\t:o FEATURE_EDITING_ASK_TERMINAL(FEATURE_EDITING_ASK_TERMINAL)
+\t:o FEATURE_MOUNT_CIFS(FEATURE_MOUNT_CIFS)
+\t:o FEATURE_LESS_DASHCMD(FEATURE_LESS_DASHCMD)
+\t:o RUNSV(RUNSV)
+\t:o DEALLOCVT(DEALLOCVT)
+\t:o UUDECODE(UUDECODE)
+\t:o ASH_BUILTIN_TEST(ASH_BUILTIN_TEST)
+\t:o SETUIDGID(SETUIDGID)
+\t:o BUSYBOX_EXEC_PATH(BUSYBOX_EXEC_PATH)
+\t:o ETHER_WAKE(ETHER_WAKE)
+\t:o ENVDIR(ENVDIR)
+\t:o TTYSIZE(TTYSIZE)
+\t:o BUILD_LIBBUSYBOX(BUILD_LIBBUSYBOX)
+\t:o FEATURE_TELNET_AUTOLOGIN(FEATURE_TELNET_AUTOLOGIN)
+\t:o SETARCH(SETARCH)
+\t:o FEATURE_DEL_USER_FROM_GROUP(FEATURE_DEL_USER_FROM_GROUP)
+\t:o NC_SERVER(NC_SERVER)
+\t:o FEATURE_CHOWN_LONG_OPTIONS(FEATURE_CHOWN_LONG_OPTIONS)
+\t:o YES(YES)
+\t:o POPMAILDIR(POPMAILDIR)
+\t:o FEATURE_SUN_LABEL(FEATURE_SUN_LABEL)
+\t:o DPKG(DPKG)
+\t:o PMAP(PMAP)
+\t:o DELGROUP(DELGROUP)
+\t:o USE_BB_CRYPT(USE_BB_CRYPT)
+\t:o FEATURE_DEVPTS(FEATURE_DEVPTS)
+\t:o FEATURE_VOLUMEID_JFS(FEATURE_VOLUMEID_JFS)
+\t:o REFORMIME(REFORMIME)
+\t:o TRACEROUTE6(TRACEROUTE6)
+\t:o DUMPLEASES(DUMPLEASES)
+\t:o USE_BB_CRYPT_SHA(USE_BB_CRYPT_SHA)
+\t:o AWK(AWK)
+\t:o FEATURE_SEAMLESS_Z(FEATURE_SEAMLESS_Z)
+\t:o FEATURE_RESIZE_PRINT(FEATURE_RESIZE_PRINT)
+\t:o HUSH_HELP(HUSH_HELP)
+\t:o FEATURE_VI_USE_SIGNALS(FEATURE_VI_USE_SIGNALS)
+\t:o HUSH_BRACE_EXPANSION(HUSH_BRACE_EXPANSION)
+\t:o FAKEIDENTD(FAKEIDENTD)
+\t:o FEATURE_MTAB_SUPPORT(FEATURE_MTAB_SUPPORT)
+\t:o FEATURE_PS_TIME(FEATURE_PS_TIME)
+\t:o IPCALC(IPCALC)
+\t:o SH_MATH_SUPPORT(SH_MATH_SUPPORT)
+\t:o ASH_ALIAS(ASH_ALIAS)
+\t:o FEATURE_HAVE_RPC(FEATURE_HAVE_RPC)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_DAYTIME(FEATURE_INETD_SUPPORT_BUILTIN_DAYTIME)
+\t:o UDHCP_DEBUG(UDHCP_DEBUG)
+\t:o DEVFSD(DEVFSD)
+\t:o FEATURE_OSF_LABEL(FEATURE_OSF_LABEL)
+\t:o SHOW_USAGE(SHOW_USAGE)
+\t:o FEATURE_MOUNT_FAKE(FEATURE_MOUNT_FAKE)
+\t:o FEATURE_UDHCPC_ARPING(FEATURE_UDHCPC_ARPING)
+\t:o FEATURE_FTPD_ACCEPT_BROKEN_LIST(FEATURE_FTPD_ACCEPT_BROKEN_LIST)
+\t:o FEATURE_TAR_FROM(FEATURE_TAR_FROM)
+\t:o FEATURE_BEEP_FREQ(FEATURE_BEEP_FREQ)
+\t:o ADDGROUP(ADDGROUP)
+\t:o COMM(COMM)
+\t:o FEATURE_LSMOD_PRETTY_2_6_OUTPUT(FEATURE_LSMOD_PRETTY_2_6_OUTPUT)
+\t:o FEATURE_PS_UNUSUAL_SYSTEMS(FEATURE_PS_UNUSUAL_SYSTEMS)
+\t:o FEATURE_TAR_LONG_OPTIONS(FEATURE_TAR_LONG_OPTIONS)
+\t:o PWD(PWD)
+\t:o IPTUNNEL(IPTUNNEL)
+\t:o FEATURE_NON_POSIX_CP(FEATURE_NON_POSIX_CP)
+\t:o PKILL(PKILL)
+\t:o FEATURE_VI_SETOPTS(FEATURE_VI_SETOPTS)
+\t:o FEATURE_GPT_LABEL(FEATURE_GPT_LABEL)
+\t:o FEATURE_GETOPT_LONG(FEATURE_GETOPT_LONG)
+\t:o CHOWN(CHOWN)
+\t:o FEATURE_EDITING_FANCY_PROMPT(FEATURE_EDITING_FANCY_PROMPT)
+\t:o FBSPLASH(FBSPLASH)
+\t:o FEATURE_INSTALL_LONG_OPTIONS(FEATURE_INSTALL_LONG_OPTIONS)
+\t:o HUSH_LOOPS(HUSH_LOOPS)
+\t:o LPD(LPD)
+\t:o FEATURE_VI_SET(FEATURE_VI_SET)
+\t:o FEATURE_VOLUMEID_BTRFS(FEATURE_VOLUMEID_BTRFS)
+\t:o FLASH_LOCK(FLASH_LOCK)
+\t:o DEFAULT_DEPMOD_FILE(DEFAULT_DEPMOD_FILE)
+\t:o LPQ(LPQ)
+\t:o FEATURE_PREFER_APPLETS(FEATURE_PREFER_APPLETS)
+\t:o LPR(LPR)
+\t:o RESIZE(RESIZE)
+\t:o FEATURE_VOLUMEID_ROMFS(FEATURE_VOLUMEID_ROMFS)
+\t:o WGET(WGET)
+\t:o FEATURE_SEAMLESS_GZ(FEATURE_SEAMLESS_GZ)
+\t:o ADJTIMEX(ADJTIMEX)
+\t:o FEATURE_WGET_LONG_OPTIONS(FEATURE_WGET_LONG_OPTIONS)
+\t:o EJECT(EJECT)
+\t:o BZIP2(BZIP2)
+\t:o ASH_GETOPTS(ASH_GETOPTS)
+\t:o BLOCKDEV(BLOCKDEV)
+\t:o MICROCOM(MICROCOM)
+\t:o FTPD(FTPD)
+\t:o FEATURE_FANCY_SLEEP(FEATURE_FANCY_SLEEP)
+\t:o DEPMOD(DEPMOD)
+\t:o FEATURE_HTTPD_ENCODE_URL_STR(FEATURE_HTTPD_ENCODE_URL_STR)
+\t:o FEATURE_TAR_GNU_EXTENSIONS(FEATURE_TAR_GNU_EXTENSIONS)
+\t:o FEATURE_WGET_STATUSBAR(FEATURE_WGET_STATUSBAR)
+\t:o FEATURE_CHECK_TAINTED_MODULE(FEATURE_CHECK_TAINTED_MODULE)
+\t:o FEATURE_FIND_NOT(FEATURE_FIND_NOT)
+\t:o FEATURE_TRACEROUTE_SOURCE_ROUTE(FEATURE_TRACEROUTE_SOURCE_ROUTE)
+\t:o LONG_OPTS(LONG_OPTS)
+\t:o FEATURE_WGET_AUTHENTICATION(FEATURE_WGET_AUTHENTICATION)
+\t:o NICE(NICE)
+\t:o FEATURE_MKDIR_LONG_OPTIONS(FEATURE_MKDIR_LONG_OPTIONS)
+\t:o FEATURE_LS_SORTFILES(FEATURE_LS_SORTFILES)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_CHARGEN(FEATURE_INETD_SUPPORT_BUILTIN_CHARGEN)
+\t:o LZMA(LZMA)
+\t:o FEATURE_INSMOD_LOAD_MAP(FEATURE_INSMOD_LOAD_MAP)
+\t:o FEATURE_UNEXPAND_LONG_OPTIONS(FEATURE_UNEXPAND_LONG_OPTIONS)
+\t:o FEATURE_IFCONFIG_STATUS(FEATURE_IFCONFIG_STATUS)
+\t:o FEATURE_TOPMEM(FEATURE_TOPMEM)
+\t:o INSTALL_APPLET_HARDLINKS(INSTALL_APPLET_HARDLINKS)
+\t:o MKFS_REISER(MKFS_REISER)
+\t:o CHMOD(CHMOD)
+\t:o RUN_PARTS(RUN_PARTS)
+\t:o FEATURE_FIND_SIZE(FEATURE_FIND_SIZE)
+\t:o INSTALL_NO_USR(INSTALL_NO_USR)
+\t:o WERROR(WERROR)
+\t:o MOUNT(MOUNT)
+\t:o INSTALL_APPLET_SYMLINKS(INSTALL_APPLET_SYMLINKS)
+\t:o WHO(WHO)
+\t:o FEATURE_MDEV_EXEC(FEATURE_MDEV_EXEC)
+\t:o FEATURE_MOUNT_FSTAB(FEATURE_MOUNT_FSTAB)
+\t:o PIPE_PROGRESS(PIPE_PROGRESS)
+\t:o FEATURE_REMOTE_LOG(FEATURE_REMOTE_LOG)
+\t:o PGREP(PGREP)
+\t:o UNICODE_SUPPORT(UNICODE_SUPPORT)
+\t:o DATE(DATE)
+\t:o FEATURE_ETC_NETWORKS(FEATURE_ETC_NETWORKS)
+\t:o FEATURE_SYSLOGD_READ_BUFFER_SIZE(FEATURE_SYSLOGD_READ_BUFFER_SIZE)
+\t:o FDISK_SUPPORT_LARGE_DISKS(FDISK_SUPPORT_LARGE_DISKS)
+\t:o TASKSET(TASKSET)
+\t:o FEATURE_TASKSET_FANCY(FEATURE_TASKSET_FANCY)
+\t:o LOGGER(LOGGER)
+\t:o FEATURE_HDPARM_HDIO_DRIVE_RESET(FEATURE_HDPARM_HDIO_DRIVE_RESET)
+\t:o FEATURE_COPYBUF_KB(FEATURE_COPYBUF_KB)
+\t:o FEATURE_PRESERVE_HARDLINKS(FEATURE_PRESERVE_HARDLINKS)
+\t:o SHA1SUM(SHA1SUM)
+\t:o DHCPRELAY(DHCPRELAY)
+\t:o LZOP(LZOP)
+\t:o FEATURE_CHECK_NAMES(FEATURE_CHECK_NAMES)
+\t:o RENICE(RENICE)
+\t:o FEATURE_HDPARM_HDIO_SCAN_HWIF(FEATURE_HDPARM_HDIO_SCAN_HWIF)
+\t:o FEATURE_PIDFILE(FEATURE_PIDFILE)
+\t:o FEATURE_IFUPDOWN_IP(FEATURE_IFUPDOWN_IP)
+\t:o DMESG(DMESG)
+\t:o ASH_JOB_CONTROL(ASH_JOB_CONTROL)
+\t:o UDHCPD(UDHCPD)
+\t:o FEATURE_MOUNT_LOOP(FEATURE_MOUNT_LOOP)
+\t:o UDHCPC(UDHCPC)
+\t:o FEATURE_LESS_BRACKETS(FEATURE_LESS_BRACKETS)
+\t:o FINDFS(FINDFS)
+\t:o FEATURE_FDISK_ADVANCED(FEATURE_FDISK_ADVANCED)
+\t:o POWERTOP(POWERTOP)
+\t:o FEATURE_LS_COLOR(FEATURE_LS_COLOR)
+\t:o FEATURE_TAR_CREATE(FEATURE_TAR_CREATE)
+\t:o FEATURE_BRCTL_FANCY(FEATURE_BRCTL_FANCY)
+\t:o HUSH_RANDOM_SUPPORT(HUSH_RANDOM_SUPPORT)
+\t:o UDHCPC_SLACK_FOR_BUGGY_SERVERS(UDHCPC_SLACK_FOR_BUGGY_SERVERS)
+\t:o FEATURE_CHAT_NOFAIL(FEATURE_CHAT_NOFAIL)
+\t:o UDPSVD(UDPSVD)
+\t:o NOHUP(NOHUP)
+\t:o FEATURE_FANCY_PING(FEATURE_FANCY_PING)
+\t:o FEATURE_DU_DEFAULT_BLOCKSIZE_1K(FEATURE_DU_DEFAULT_BLOCKSIZE_1K)
+\t:o FEATURE_NETSTAT_WIDE(FEATURE_NETSTAT_WIDE)
+\t:o FEATURE_CHECK_UNICODE_IN_ENV(FEATURE_CHECK_UNICODE_IN_ENV)
+</feature_tree>
+    <constraints>
+C1:root
+C2:STATIC  or  ~PIE
+C3:HEXDUMP  or  ~FEATURE_HEXDUMP_REVERSE
+C4:HEXDUMP  or  ~HD
+C5:EXPAND  or  ~FEATURE_EXPAND_LONG_OPTIONS
+C6:HDPARM  or  ~FEATURE_HDPARM_HDIO_TRISTATE_HWIF
+C7:HDPARM  or  ~FEATURE_HDPARM_GET_IDENTITY
+C8:HDPARM  or  ~FEATURE_HDPARM_HDIO_SCAN_HWIF
+C9:HDPARM  or  ~FEATURE_HDPARM_HDIO_GETSET_DMA
+C10:HDPARM  or  ~FEATURE_HDPARM_HDIO_UNREGISTER_HWIF
+C11:HDPARM  or  ~FEATURE_HDPARM_HDIO_DRIVE_RESET
+C12:AR  or  ~FEATURE_AR_LONG_FILENAMES
+C13:AR  or  ~FEATURE_AR_CREATE
+C14:SETFILES  or  ~FEATURE_SETFILES_CHECK_OPTION
+C15:HUSH_FUNCTIONS  or  ~HUSH_LOCAL
+C16:HALT  or  ~FEATURE_CALL_TELINIT
+C17:BRCTL  or  ~FEATURE_BRCTL_FANCY
+C18:CP  or  ~FEATURE_CP_LONG_OPTIONS
+C19:DC  or  ~FEATURE_DC_LIBM
+C20:DD  or  ~FEATURE_DD_IBS_OBS
+C21:DD  or  ~FEATURE_DD_SIGNAL_HANDLING
+C22:DF  or  ~FEATURE_DF_FANCY
+C23:UNICODE_BIDI_SUPPORT  or  ~UNICODE_NEUTRAL_TABLE
+C24:DU  or  ~FEATURE_DU_DEFAULT_BLOCKSIZE_1K
+C25:MDEV  or  ~FEATURE_MDEV_LOAD_FIRMWARE
+C26:MDEV  or  ~FEATURE_MDEV_CONF
+C27:FEATURE_LAST_SMALL_alt  or  ~FEATURE_LAST_SMALL
+C28:FEATURE_LAST_SMALL_alt  or  ~FEATURE_LAST_FANCY
+C29:FEATURE_LAST_SMALL  or  FEATURE_LAST_FANCY  or  ~FEATURE_LAST_SMALL_alt
+C30:~FEATURE_LAST_SMALL  or  ~FEATURE_LAST_FANCY
+C31:UNLZMA  or  ~FEATURE_LZMA_FAST
+C32:UNLZMA  or  ~LZMA
+C33:TUNCTL  or  ~FEATURE_TUNCTL_UG
+C34:FEATURE_KILL_REMOVED  or  ~FEATURE_KILL_DELAY
+C35:FEATURE_KILL_DELAY  or  ~FEATURE_KILL_REMOVED
+C36:UNEXPAND  or  ~FEATURE_UNEXPAND_LONG_OPTIONS
+C37:root  or  ~FEATURE_MOUNT_LOOP
+C38:root  or  ~RX
+C39:root  or  ~CMP
+C40:root  or  ~VOLNAME
+C41:root  or  ~SMEMCAP
+C42:root  or  ~SWAPONOFF
+C43:root  or  ~LOGNAME
+C44:root  or  ~UNICODE_SUPPORT
+C45:root  or  ~TFTP
+C46:root  or  ~FEATURE_UNIX_LOCAL
+C47:root  or  ~FEATURE_PS_UNUSUAL_SYSTEMS
+C48:root  or  ~UNZIP
+C49:root  or  ~FBSPLASH
+C50:root  or  ~DMESG
+C51:root  or  ~UDHCP_DEBUG
+C52:root  or  ~ID
+C53:root  or  ~VCONFIG
+C54:root  or  ~FTPPUT
+C55:root  or  ~SED
+C56:root  or  ~FEATURE_VOLUMEID_ROMFS
+C57:root  or  ~DELUSER
+C58:root  or  ~CHAT
+C59:root  or  ~GUNZIP
+C60:root  or  ~FEATURE_VOLUMEID_LINUXRAID
+C61:root  or  ~CPIO
+C62:root  or  ~BUSYBOX_EXEC_PATH
+C63:root  or  ~PATCH
+C64:root  or  ~SV
+C65:root  or  ~BASENAME
+C66:root  or  ~CATV
+C67:root  or  ~MKTEMP
+C68:root  or  ~LOADKMAP
+C69:root  or  ~SETCONSOLE
+C70:root  or  ~PASSWD
+C71:root  or  ~FEATURE_VOLUMEID_LINUXSWAP
+C72:root  or  ~ETHER_WAKE
+C73:root  or  ~BBCONFIG
+C74:root  or  ~MKFS_REISER
+C75:root  or  ~TR
+C76:root  or  ~INCLUDE_SUSv2
+C77:root  or  ~GETSEBOOL
+C78:root  or  ~WALL
+C79:root  or  ~LN
+C80:root  or  ~BOOTCHARTD
+C81:root  or  ~UNEXPAND
+C82:root  or  ~WHOAMI
+C83:root  or  ~DEFAULT_MODULES_DIR
+C84:root  or  ~FEATURE_FAST_TOP
+C85:root  or  ~LPR
+C86:root  or  ~GZIP
+C87:root  or  ~FEATURE_SH_IS_HUSH_alt
+C88:root  or  ~VLOCK
+C89:root  or  ~MKFS_EXT2
+C90:root  or  ~SHOW_USAGE
+C91:root  or  ~SYSLOGD
+C92:root  or  ~IPCALC
+C93:root  or  ~DIFF
+C94:root  or  ~CHGRP
+C95:root  or  ~READAHEAD
+C96:root  or  ~SELINUX
+C97:root  or  ~FEATURE_SHADOWPASSWDS
+C98:root  or  ~LZOP
+C99:root  or  ~UNLZMA
+C100:root  or  ~CONSPY
+C101:root  or  ~LONG_OPTS
+C102:root  or  ~MSH
+C103:root  or  ~FDFORMAT
+C104:root  or  ~DUMPKMAP
+C105:root  or  ~FEATURE_IPV6
+C106:root  or  ~NTPD
+C107:root  or  ~SORT
+C108:root  or  ~DEFAULT_DEPMOD_FILE
+C109:root  or  ~RDATE
+C110:root  or  ~EXTRA_CFLAGS
+C111:root  or  ~ADDUSER
+C112:root  or  ~FAKEIDENTD
+C113:root  or  ~FEATURE_VOLUMEID_ISO9660
+C114:root  or  ~TRUE
+C115:root  or  ~MOUNT
+C116:root  or  ~DEVFSD
+C117:root  or  ~FEATURE_CLEAN_UP
+C118:root  or  ~CTTYHACK
+C119:root  or  ~SUM
+C120:root  or  ~ZCIP
+C121:root  or  ~FEATURE_MODUTILS_ALIAS
+C122:root  or  ~UNCOMPRESS
+C123:root  or  ~PIDOF
+C124:root  or  ~SULOGIN
+C125:root  or  ~MDEV
+C126:root  or  ~LOAD_POLICY
+C127:root  or  ~TAIL
+C128:root  or  ~CROND
+C129:root  or  ~IPCS
+C130:root  or  ~NOMMU
+C131:root  or  ~FEATURE_PRESERVE_HARDLINKS
+C132:root  or  ~UBIATTACH
+C133:root  or  ~DF
+C134:root  or  ~UMOUNT
+C135:root  or  ~IPROUTE
+C136:root  or  ~READLINK
+C137:root  or  ~SVLOGD
+C138:root  or  ~PASSWORD_MINLEN
+C139:root  or  ~CHPST
+C140:root  or  ~FREE
+C141:root  or  ~SETFILES
+C142:root  or  ~FLASH_LOCK
+C143:root  or  ~MOUNTPOINT
+C144:root  or  ~FEATURE_2_4_MODULES
+C145:root  or  ~LSPCI
+C146:root  or  ~FEATURE_SEAMLESS_Z
+C147:root  or  ~IOCTL_HEX2STR_ERROR
+C148:root  or  ~HALT
+C149:root  or  ~TASKSET
+C150:root  or  ~KILL
+C151:root  or  ~IOSTAT
+C152:root  or  ~EJECT
+C153:root  or  ~HTTPD
+C154:root  or  ~ADJTIMEX
+C155:root  or  ~USLEEP
+C156:root  or  ~MKDIR
+C157:root  or  ~LOADFONT
+C158:root  or  ~PRINTENV
+C159:root  or  ~FSCK_MINIX
+C160:root  or  ~FEATURE_INSTALLER
+C161:root  or  ~MV
+C162:root  or  ~POPMAILDIR
+C163:root  or  ~SETENFORCE
+C164:root  or  ~RUNSV
+C165:root  or  ~NMETER
+C166:root  or  ~DNSD
+C167:root  or  ~HOSTNAME
+C168:root  or  ~CHRT
+C169:root  or  ~FEATURE_EDITING
+C170:root  or  ~TAR
+C171:root  or  ~TCPSVD
+C172:root  or  ~GETTY
+C173:root  or  ~SESTATUS
+C174:root  or  ~PRINTF
+C175:root  or  ~FEATURE_VOLUMEID_SYSV
+C176:root  or  ~FEATURE_VOLUMEID_JFS
+C177:root  or  ~RENICE
+C178:root  or  ~GREP
+C179:root  or  ~MAKEDEVS
+C180:root  or  ~IFUPDOWN_UDHCPC_CMD_OPTIONS
+C181:root  or  ~TEST
+C182:root  or  ~INIT
+C183:root  or  ~FEATURE_AUTOWIDTH
+C184:root  or  ~DEBUG
+C185:root  or  ~COMM
+C186:root  or  ~BEEP
+C187:root  or  ~ACPID
+C188:root  or  ~FEATURE_VOLUMEID_XFS
+C189:root  or  ~SETARCH
+C190:root  or  ~FLASHCP
+C191:root  or  ~LPQ
+C192:root  or  ~TELNETD
+C193:root  or  ~FDFLUSH
+C194:root  or  ~FEATURE_SH_NOFORK
+C195:root  or  ~DIRNAME
+C196:root  or  ~FEATURE_VOLUMEID_OCFS2
+C197:root  or  ~WGET
+C198:root  or  ~SETLOGCONS
+C199:root  or  ~CP
+C200:root  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt
+C201:root  or  ~HAVE_DOT_CONFIG
+C202:root  or  ~PIVOT_ROOT
+C203:root  or  ~UNXZ
+C204:root  or  ~NSLOOKUP
+C205:root  or  ~FTPGET
+C206:root  or  ~MATCHPATHCON
+C207:root  or  ~HUSH
+C208:root  or  ~NANDWRITE
+C209:root  or  ~SCRIPT
+C210:root  or  ~STTY
+C211:root  or  ~PMAP
+C212:root  or  ~TFTPD
+C213:root  or  ~OPENVT
+C214:root  or  ~BUILD_LIBBUSYBOX
+C215:root  or  ~FOLD
+C216:root  or  ~UUENCODE
+C217:root  or  ~HEAD
+C218:root  or  ~BB_SYSCTL
+C219:root  or  ~UDHCPC_SLACK_FOR_BUGGY_SERVERS
+C220:root  or  ~ADD_SHELL
+C221:root  or  ~SLATTACH
+C222:root  or  ~FEATURE_DEVFS
+C223:root  or  ~SHOWKEY
+C224:root  or  ~LOCALE_SUPPORT
+C225:root  or  ~SH_MATH_SUPPORT
+C226:root  or  ~UNAME
+C227:root  or  ~CHOWN
+C228:root  or  ~SETUIDGID
+C229:root  or  ~START_STOP_DAEMON
+C230:root  or  ~FINDFS
+C231:root  or  ~HDPARM
+C232:root  or  ~MAN
+C233:root  or  ~FEATURE_NON_POSIX_CP
+C234:root  or  ~REFORMIME
+C235:root  or  ~PIPE_PROGRESS
+C236:root  or  ~RAIDAUTORUN
+C237:root  or  ~STRINGS
+C238:root  or  ~RDEV
+C239:root  or  ~DPKG_DEB
+C240:root  or  ~REALPATH
+C241:root  or  ~MKFS_VFAT
+C242:root  or  ~CAL
+C243:root  or  ~SENDMAIL
+C244:root  or  ~IFPLUGD
+C245:root  or  ~MD5SUM
+C246:root  or  ~FUSER
+C247:root  or  ~UBIDETACH
+C248:root  or  ~GETOPT
+C249:root  or  ~INSTALL
+C250:root  or  ~UDHCPC
+C251:root  or  ~FEATURE_BUFFERS_GO_IN_BSS_alt
+C252:root  or  ~TAC
+C253:root  or  ~FEATURE_LOADFONT_PSF2
+C254:root  or  ~DD
+C255:root  or  ~FEATURE_HUMAN_READABLE
+C256:root  or  ~RUN_PARTS
+C257:root  or  ~FEATURE_VERBOSE_CP_MESSAGE
+C258:root  or  ~WERROR
+C259:root  or  ~BUNZIP2
+C260:root  or  ~FTPD
+C261:root  or  ~TRACEROUTE
+C262:root  or  ~RFKILL
+C263:root  or  ~FALSE
+C264:root  or  ~CHATTR
+C265:root  or  ~LFS
+C266:root  or  ~FSYNC
+C267:root  or  ~REV
+C268:root  or  ~FEATURE_BASH_IS_HUSH_alt
+C269:root  or  ~CHPASSWD
+C270:root  or  ~RESTORECON
+C271:root  or  ~DU
+C272:root  or  ~FEATURE_INSMOD_LOADINKMEM
+C273:root  or  ~EXTRA_COMPAT
+C274:root  or  ~USE_PORTABLE_CODE
+C275:root  or  ~PSCAN
+C276:root  or  ~SHA512SUM
+C277:root  or  ~DATE
+C278:root  or  ~SETFONT
+C279:root  or  ~RUNLEVEL
+C280:root  or  ~IONICE
+C281:root  or  ~RESIZE
+C282:root  or  ~FLASH_UNLOCK
+C283:root  or  ~FEATURE_LOADFONT_RAW
+C284:root  or  ~IFUPDOWN
+C285:root  or  ~FEATURE_SUID
+C286:root  or  ~ARP
+C287:root  or  ~CHCON
+C288:root  or  ~AR
+C289:root  or  ~READPROFILE
+C290:root  or  ~ENVUIDGID
+C291:root  or  ~LENGTH
+C292:root  or  ~ADDGROUP
+C293:root  or  ~BASE64
+C294:root  or  ~RUNCON
+C295:root  or  ~DMALLOC_alt
+C296:root  or  ~IP
+C297:root  or  ~SEQ
+C298:root  or  ~FEATURE_SYSLOG
+C299:root  or  ~FEATURE_PREFER_APPLETS
+C300:root  or  ~DEALLOCVT
+C301:root  or  ~MKSWAP
+C302:root  or  ~MICROCOM
+C303:root  or  ~GETENFORCE
+C304:root  or  ~LS
+C305:root  or  ~ROUTE
+C306:root  or  ~UUDECODE
+C307:root  or  ~TTYSIZE
+C308:root  or  ~EXPR
+C309:root  or  ~IPRULE
+C310:root  or  ~WATCH
+C311:root  or  ~FGCONSOLE
+C312:root  or  ~FSCK
+C313:root  or  ~CRYPTPW
+C314:root  or  ~ED
+C315:root  or  ~WHO
+C316:root  or  ~FEATURE_SEAMLESS_GZ
+C317:root  or  ~MAKEMIME
+C318:root  or  ~FLOCK
+C319:root  or  ~BRCTL
+C320:root  or  ~DESKTOP
+C321:root  or  ~PLATFORM_LINUX
+C322:root  or  ~LOGGER
+C323:root  or  ~TIMEOUT
+C324:root  or  ~LSUSB
+C325:root  or  ~FEATURE_SEAMLESS_LZMA
+C326:root  or  ~MT
+C327:root  or  ~DEVMEM
+C328:root  or  ~POWERTOP
+C329:root  or  ~TEE
+C330:root  or  ~FEATURE_SH_STANDALONE
+C331:root  or  ~FEATURE_DEVPTS
+C332:root  or  ~HEXDUMP
+C333:root  or  ~SWITCH_ROOT
+C334:root  or  ~TUNCTL
+C335:root  or  ~FEATURE_INSMOD_KSYMOOPS_SYMBOLS
+C336:root  or  ~LAST
+C337:root  or  ~MODPROBE_SMALL
+C338:root  or  ~LOGIN
+C339:root  or  ~BLOCKDEV
+C340:root  or  ~FDISK
+C341:root  or  ~MORE
+C342:root  or  ~KLOGD
+C343:root  or  ~CROSS_COMPILER_PREFIX
+C344:root  or  ~RUNSVDIR
+C345:root  or  ~RTCWAKE
+C346:root  or  ~FIND
+C347:root  or  ~FEATURE_MD5_SHA1_SUM_CHECK
+C348:root  or  ~DC
+C349:root  or  ~RPM2CPIO
+C350:root  or  ~SLEEP
+C351:root  or  ~MESG
+C352:root  or  ~IPTUNNEL
+C353:root  or  ~INSTALL_APPLET_DONT_alt
+C354:root  or  ~PWD
+C355:root  or  ~AWK
+C356:root  or  ~ENV
+C357:root  or  ~SPLIT
+C358:root  or  ~ASH
+C359:root  or  ~WHICH
+C360:root  or  ~FEATURE_WTMP
+C361:root  or  ~CHMOD
+C362:root  or  ~ENVDIR
+C363:root  or  ~DELGROUP
+C364:root  or  ~CUT
+C365:root  or  ~SETSID
+C366:root  or  ~SHA1SUM
+C367:root  or  ~USE_BB_PWD_GRP
+C368:root  or  ~NOHUP
+C369:root  or  ~TOP
+C370:root  or  ~RPM
+C371:root  or  ~BZIP2
+C372:root  or  ~FLASH_ERASEALL
+C373:root  or  ~LPD
+C374:root  or  ~FEATURE_HWIB
+C375:root  or  ~FEATURE_PREFER_IPV4_ADDRESS
+C376:root  or  ~FEATURE_INSMOD_TRY_MMAP
+C377:root  or  ~STAT
+C378:root  or  ~FEATURE_VOLUMEID_CRAMFS
+C379:root  or  ~FEATURE_VOLUMEID_BTRFS
+C380:root  or  ~FEATURE_SH_EXTRA_QUIET
+C381:root  or  ~SHA256SUM
+C382:root  or  ~IPLINK
+C383:root  or  ~FEATURE_VOLUMEID_HFS
+C384:root  or  ~IPCRM
+C385:root  or  ~SU
+C386:root  or  ~FEATURE_INSMOD_VERSION_CHECKING
+C387:root  or  ~FEATURE_UDHCP_PORT
+C388:root  or  ~UPTIME
+C389:root  or  ~TELNET
+C390:root  or  ~SETKEYCODES
+C391:root  or  ~CLEAR
+C392:root  or  ~FBSET
+C393:root  or  ~CAT
+C394:root  or  ~FEATURE_COPYBUF_KB
+C395:root  or  ~FEATURE_SEAMLESS_XZ
+C396:root  or  ~SELINUXENABLED
+C397:root  or  ~ECHO
+C398:root  or  ~IFENSLAVE
+C399:root  or  ~USE_BB_CRYPT
+C400:root  or  ~WC
+C401:root  or  ~FEATURE_VOLUMEID_EXT
+C402:root  or  ~FREERAMDISK
+C403:root  or  ~INOTIFYD
+C404:root  or  ~TUNE2FS
+C405:root  or  ~SYNC
+C406:root  or  ~UNIQ
+C407:root  or  ~FEATURE_INSMOD_LOAD_MAP
+C408:root  or  ~REMOVE_SHELL
+C409:root  or  ~SETSEBOOL
+C410:root  or  ~BLKID
+C411:root  or  ~NANDDUMP
+C412:root  or  ~INETD
+C413:root  or  ~HOSTID
+C414:root  or  ~HWCLOCK
+C415:root  or  ~FEATURE_MINIX2
+C416:root  or  ~FEATURE_VOLUMEID_UDF
+C417:root  or  ~IPADDR
+C418:root  or  ~VI
+C419:root  or  ~LESS
+C420:root  or  ~FEATURE_SEAMLESS_BZ2
+C421:root  or  ~FEATURE_USE_TERMIOS
+C422:root  or  ~NICE
+C423:root  or  ~PING
+C424:root  or  ~MKFS_MINIX
+C425:root  or  ~OD
+C426:root  or  ~EXPAND
+C427:root  or  ~UDHCPD
+C428:root  or  ~SOFTLIMIT
+C429:root  or  ~DPKG
+C430:root  or  ~YES
+C431:root  or  ~UDHCPC_DEFAULT_SCRIPT
+C432:root  or  ~FEATURE_PIDFILE
+C433:root  or  ~NBDCLIENT
+C434:root  or  ~LSATTR
+C435:root  or  ~CHROOT
+C436:root  or  ~FEATURE_CHECK_TAINTED_MODULE
+C437:root  or  ~TIME
+C438:root  or  ~MD5_SIZE_VS_SPEED
+C439:root  or  ~FEATURE_UDHCP_RFC3397
+C440:root  or  ~CHVT
+C441:root  or  ~PGREP
+C442:root  or  ~VERBOSE_RESOLUTION_ERRORS
+C443:root  or  ~RMDIR
+C444:root  or  ~RM
+C445:root  or  ~CKSUM
+C446:root  or  ~FEATURE_MTAB_SUPPORT
+C447:root  or  ~LOSETUP
+C448:root  or  ~FEATURE_UTMP
+C449:root  or  ~CRONTAB
+C450:root  or  ~NC
+C451:root  or  ~FEATURE_VOLUMEID_REISERFS
+C452:root  or  ~NAMEIF
+C453:root  or  ~PREFIX
+C454:root  or  ~ARPING
+C455:root  or  ~MONOTONIC_SYSCALL
+C456:root  or  ~IFCONFIG
+C457:root  or  ~UDPSVD
+C458:root  or  ~FEATURE_HAVE_RPC
+C459:root  or  ~MKFIFO
+C460:root  or  ~DOS2UNIX
+C461:root  or  ~XARGS
+C462:root  or  ~VOLUMEID
+C463:root  or  ~FEATURE_VOLUMEID_FAT
+C464:root  or  ~KBD_MODE
+C465:root  or  ~FEATURE_MODUTILS_SYMBOLS
+C466:root  or  ~PS
+C467:root  or  ~RESET
+C468:root  or  ~SCRIPTREPLAY
+C469:root  or  ~NETSTAT
+C470:root  or  ~STATIC
+C471:root  or  ~FEATURE_ETC_NETWORKS
+C472:root  or  ~TTY
+C473:root  or  ~TOUCH
+C474:root  or  ~PKILL
+C475:root  or  ~MKNOD
+C476:root  or  ~FEATURE_VOLUMEID_LUKS
+C477:root  or  ~MODINFO
+C478:root  or  ~FEATURE_VOLUMEID_NTFS
+C479:root  or  ~MPSTAT
+C480:root  or  ~WATCHDOG
+C481:UDHCP_DEBUG  or  ~root
+C482:BUSYBOX_EXEC_PATH  or  ~root
+C483:DEFAULT_MODULES_DIR  or  ~root
+C484:FEATURE_SH_IS_HUSH_alt  or  ~root
+C485:DEFAULT_DEPMOD_FILE  or  ~root
+C486:EXTRA_CFLAGS  or  ~root
+C487:PASSWORD_MINLEN  or  ~root
+C488:IFUPDOWN_UDHCPC_CMD_OPTIONS  or  ~root
+C489:INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt  or  ~root
+C490:UDHCPC_SLACK_FOR_BUGGY_SERVERS  or  ~root
+C491:FEATURE_BUFFERS_GO_IN_BSS_alt  or  ~root
+C492:FEATURE_BASH_IS_HUSH_alt  or  ~root
+C493:DMALLOC_alt  or  ~root
+C494:CROSS_COMPILER_PREFIX  or  ~root
+C495:INSTALL_APPLET_DONT_alt  or  ~root
+C496:FEATURE_COPYBUF_KB  or  ~root
+C497:UDHCPC_DEFAULT_SCRIPT  or  ~root
+C498:MD5_SIZE_VS_SPEED  or  ~root
+C499:PREFIX  or  ~root
+C500:TELNET  or  ~FEATURE_TELNET_TTYPE
+C501:TELNET  or  ~FEATURE_TELNET_AUTOLOGIN
+C502:TRACEROUTE  or  ~FEATURE_TRACEROUTE_USE_ICMP
+C503:TRACEROUTE  or  ~FEATURE_TRACEROUTE_VERBOSE
+C504:TRACEROUTE  or  ~FEATURE_TRACEROUTE_SOURCE_ROUTE
+C505:TRACEROUTE  or  ~TRACEROUTE6
+C506:DMALLOC_alt  or  ~NO_DEBUG_LIB
+C507:DMALLOC_alt  or  ~DMALLOC
+C508:DMALLOC_alt  or  ~EFENCE
+C509:NO_DEBUG_LIB  or  DMALLOC  or  EFENCE  or  ~DMALLOC_alt
+C510:~NO_DEBUG_LIB  or  ~DMALLOC
+C511:~NO_DEBUG_LIB  or  ~EFENCE
+C512:~DMALLOC  or  ~EFENCE
+C513:MODPROBE_SMALL  or  ~DEPMOD
+C514:MODPROBE_SMALL  or  ~FEATURE_MODPROBE_SMALL_OPTIONS_ON_CMDLINE
+C515:MODPROBE_SMALL  or  ~LSMOD
+C516:MODPROBE_SMALL  or  ~RMMOD
+C517:MODPROBE_SMALL  or  ~MODPROBE
+C518:MODPROBE_SMALL  or  ~INSMOD
+C519:MODPROBE_SMALL  or  ~FEATURE_MODPROBE_SMALL_CHECK_ALREADY_LOADED
+C520:SETCONSOLE  or  ~FEATURE_SETCONSOLE_LONG_OPTIONS
+C521:FDISK  or  ~FDISK_SUPPORT_LARGE_DISKS
+C522:FDISK  or  ~FEATURE_FDISK_WRITABLE
+C523:FEATURE_SH_IS_HUSH_alt  or  ~FEATURE_SH_IS_ASH
+C524:FEATURE_SH_IS_HUSH_alt  or  ~FEATURE_SH_IS_HUSH
+C525:FEATURE_SH_IS_HUSH_alt  or  ~FEATURE_SH_IS_NONE
+C526:FEATURE_SH_IS_ASH  or  FEATURE_SH_IS_HUSH  or  FEATURE_SH_IS_NONE  or  ~FEATURE_SH_IS_HUSH_alt
+C527:~FEATURE_SH_IS_ASH  or  ~FEATURE_SH_IS_HUSH
+C528:~FEATURE_SH_IS_ASH  or  ~FEATURE_SH_IS_NONE
+C529:~FEATURE_SH_IS_HUSH  or  ~FEATURE_SH_IS_NONE
+C530:IP  or  ~FEATURE_IP_RULE
+C531:IP  or  ~FEATURE_IP_LINK
+C532:IP  or  ~FEATURE_IP_TUNNEL
+C533:IP  or  ~FEATURE_IP_ROUTE
+C534:IP  or  ~FEATURE_IP_ADDRESS
+C535:IP  or  ~FEATURE_IP_SHORT_FORMS
+C536:IP  or  ~FEATURE_IP_RARE_PROTOCOLS
+C537:USE_BB_PWD_GRP  or  ~USE_BB_SHADOW
+C538:FEATURE_SUID  or  ~FEATURE_SUID_CONFIG
+C539:FEATURE_MDEV_RENAME  or  ~FEATURE_MDEV_RENAME_REGEXP
+C540:TFTPD  or  ~FEATURE_TFTP_PUT
+C541:TFTPD  or  ~FEATURE_TFTP_BLOCKSIZE
+C542:TFTPD  or  ~TFTP_DEBUG
+C543:TFTPD  or  ~FEATURE_TFTP_GET
+C544:PING  or  ~PING6
+C545:PING  or  ~FEATURE_FANCY_PING
+C546:START_STOP_DAEMON  or  ~FEATURE_START_STOP_DAEMON_LONG_OPTIONS
+C547:START_STOP_DAEMON  or  ~FEATURE_START_STOP_DAEMON_FANCY
+C548:GZIP  or  ~FEATURE_GZIP_LONG_OPTIONS
+C549:LS  or  ~FEATURE_LS_TIMESTAMPS
+C550:LS  or  ~FEATURE_LS_FILETYPES
+C551:LS  or  ~FEATURE_LS_RECURSIVE
+C552:LS  or  ~FEATURE_LS_COLOR
+C553:LS  or  ~FEATURE_LS_FOLLOWLINKS
+C554:LS  or  ~FEATURE_LS_USERNAME
+C555:LS  or  ~FEATURE_LS_SORTFILES
+C556:LOGREAD  or  ~FEATURE_LOGREAD_REDUCED_LOCKING
+C557:FEATURE_CALL_TELINIT  or  ~TELINIT_PATH
+C558:TELINIT_PATH  or  ~FEATURE_CALL_TELINIT
+C559:ADDUSER  or  ~LAST_SYSTEM_ID
+C560:ADDUSER  or  ~FEATURE_ADDUSER_LONG_OPTIONS
+C561:ADDUSER  or  ~FEATURE_CHECK_NAMES
+C562:ADDUSER  or  ~FIRST_SYSTEM_ID
+C563:LAST_SYSTEM_ID  or  ~ADDUSER
+C564:FIRST_SYSTEM_ID  or  ~ADDUSER
+C565:MV  or  ~FEATURE_MV_LONG_OPTIONS
+C566:NC  or  ~NC_SERVER
+C567:NC  or  ~NC_110_COMPAT
+C568:NC  or  ~NC_EXTRA
+C569:ACPID  or  ~FEATURE_ACPID_COMPAT
+C570:LESS  or  ~FEATURE_LESS_FLAGS
+C571:LESS  or  ~FEATURE_LESS_MAXLINES
+C572:LESS  or  ~FEATURE_LESS_REGEXP
+C573:LESS  or  ~FEATURE_LESS_WINCH
+C574:LESS  or  ~FEATURE_LESS_BRACKETS
+C575:LESS  or  ~FEATURE_LESS_MARKS
+C576:LESS  or  ~FEATURE_LESS_DASHCMD
+C577:FEATURE_LESS_MAXLINES  or  ~LESS
+C578:XARGS  or  ~FEATURE_XARGS_SUPPORT_CONFIRMATION
+C579:XARGS  or  ~FEATURE_XARGS_SUPPORT_QUOTES
+C580:XARGS  or  ~FEATURE_XARGS_SUPPORT_ZERO_TERM
+C581:XARGS  or  ~FEATURE_XARGS_SUPPORT_TERMOPT
+C582:BOOTCHARTD  or  ~FEATURE_BOOTCHARTD_CONFIG_FILE
+C583:BOOTCHARTD  or  ~FEATURE_BOOTCHARTD_BLOATED_HEADER
+C584:FEATURE_TAB_COMPLETION  or  ~FEATURE_USERNAME_COMPLETION
+C585:EXPR  or  ~EXPR_MATH_SUPPORT_64
+C586:DPKG_DEB  or  ~FEATURE_DPKG_DEB_EXTRACT_ONLY
+C587:SLEEP  or  ~FEATURE_FANCY_SLEEP
+C588:PS  or  ~FEATURE_PS_TIME
+C589:PS  or  ~FEATURE_PS_ADDITIONAL_COLUMNS
+C590:PS  or  ~FEATURE_PS_WIDE
+C591:ECHO  or  ~FEATURE_FANCY_ECHO
+C592:INETD  or  ~FEATURE_INETD_RPC
+C593:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_ECHO
+C594:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_DISCARD
+C595:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_TIME
+C596:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_CHARGEN
+C597:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_DAYTIME
+C598:NTPD  or  ~FEATURE_NTPD_SERVER
+C599:MAKEMIME  or  ~FEATURE_MIME_CHARSET
+C600:FEATURE_MIME_CHARSET  or  ~MAKEMIME
+C601:FEATURE_TOP_CPU_USAGE_PERCENTAGE  or  ~FEATURE_TOP_DECIMALS
+C602:FEATURE_TOP_CPU_USAGE_PERCENTAGE  or  ~FEATURE_TOP_CPU_GLOBAL_PERCENTS
+C603:HUSH_BASH_COMPAT  or  ~HUSH_BRACE_EXPANSION
+C604:CPIO  or  ~FEATURE_CPIO_O
+C605:FTPPUT  or  ~FEATURE_FTPGETPUT_LONG_OPTIONS
+C606:SU  or  ~FEATURE_SU_CHECKS_SHELLS
+C607:SU  or  ~FEATURE_SU_SYSLOG
+C608:SV  or  ~SV_DEFAULT_SERVICE_DIR
+C609:SV_DEFAULT_SERVICE_DIR  or  ~SV
+C610:IFCONFIG  or  ~FEATURE_IFCONFIG_STATUS
+C611:IFCONFIG  or  ~FEATURE_IFCONFIG_HW
+C612:IFCONFIG  or  ~FEATURE_IFCONFIG_MEMSTART_IOADDR_IRQ
+C613:IFCONFIG  or  ~FEATURE_IFCONFIG_SLIP
+C614:IFCONFIG  or  ~FEATURE_IFCONFIG_BROADCAST_PLUS
+C615:SWAPONOFF  or  ~FEATURE_SWAPON_PRI
+C616:TR  or  ~FEATURE_TR_CLASSES
+C617:TR  or  ~FEATURE_TR_EQUIV
+C618:FEATURE_BUFFERS_GO_IN_BSS_alt  or  ~FEATURE_BUFFERS_USE_MALLOC
+C619:FEATURE_BUFFERS_GO_IN_BSS_alt  or  ~FEATURE_BUFFERS_GO_ON_STACK
+C620:FEATURE_BUFFERS_GO_IN_BSS_alt  or  ~FEATURE_BUFFERS_GO_IN_BSS
+C621:FEATURE_BUFFERS_USE_MALLOC  or  FEATURE_BUFFERS_GO_ON_STACK  or  FEATURE_BUFFERS_GO_IN_BSS  or  ~FEATURE_BUFFERS_GO_IN_BSS_alt
+C622:~FEATURE_BUFFERS_USE_MALLOC  or  ~FEATURE_BUFFERS_GO_ON_STACK
+C623:~FEATURE_BUFFERS_USE_MALLOC  or  ~FEATURE_BUFFERS_GO_IN_BSS
+C624:~FEATURE_BUFFERS_GO_ON_STACK  or  ~FEATURE_BUFFERS_GO_IN_BSS
+C625:FEATURE_TELNETD_STANDALONE  or  ~FEATURE_TELNETD_INETD_WAIT
+C626:PASSWD  or  ~FEATURE_PASSWD_WEAK_CHECK
+C627:IFUPDOWN  or  ~FEATURE_IFUPDOWN_IPV4
+C628:IFUPDOWN  or  ~FEATURE_IFUPDOWN_IP
+C629:IFUPDOWN  or  ~IFUPDOWN_IFSTATE_PATH
+C630:IFUPDOWN  or  ~FEATURE_IFUPDOWN_MAPPING
+C631:IFUPDOWN  or  ~FEATURE_IFUPDOWN_IPV6
+C632:IFUPDOWN  or  ~FEATURE_IFUPDOWN_EXTERNAL_DHCP
+C633:IFUPDOWN_IFSTATE_PATH  or  ~IFUPDOWN
+C634:VI  or  ~FEATURE_VI_DOT_CMD
+C635:VI  or  ~FEATURE_VI_ASK_TERMINAL
+C636:VI  or  ~FEATURE_VI_WIN_RESIZE
+C637:VI  or  ~FEATURE_VI_8BIT
+C638:VI  or  ~FEATURE_VI_SET
+C639:VI  or  ~FEATURE_ALLOW_EXEC
+C640:VI  or  ~FEATURE_VI_MAX_LEN
+C641:VI  or  ~FEATURE_VI_READONLY
+C642:VI  or  ~FEATURE_VI_USE_SIGNALS
+C643:VI  or  ~FEATURE_VI_OPTIMIZE_CURSOR
+C644:VI  or  ~FEATURE_VI_SETOPTS
+C645:VI  or  ~FEATURE_VI_SEARCH
+C646:VI  or  ~FEATURE_VI_YANKMARK
+C647:VI  or  ~FEATURE_VI_COLON
+C648:FEATURE_VI_MAX_LEN  or  ~VI
+C649:SETFONT  or  ~DEFAULT_SETFONT_DIR
+C650:SETFONT  or  ~FEATURE_SETFONT_TEXTUAL_MAP
+C651:DEFAULT_SETFONT_DIR  or  ~SETFONT
+C652:LAST  or  ~FEATURE_LAST_SMALL_alt
+C653:FEATURE_LAST_SMALL_alt  or  ~LAST
+C654:FEATURE_TFTP_BLOCKSIZE  or  ~FEATURE_TFTP_PROGRESS_BAR
+C655:WC  or  ~FEATURE_WC_LARGE
+C656:SYSLOGD  or  ~FEATURE_ROTATE_LOGFILE
+C657:SYSLOGD  or  ~FEATURE_SYSLOGD_DUP
+C658:SYSLOGD  or  ~FEATURE_REMOTE_LOG
+C659:SYSLOGD  or  ~FEATURE_IPC_SYSLOG
+C660:SYSLOGD  or  ~FEATURE_SYSLOGD_READ_BUFFER_SIZE
+C661:FEATURE_SYSLOGD_READ_BUFFER_SIZE  or  ~SYSLOGD
+C662:GREP  or  ~FEATURE_GREP_FGREP_ALIAS
+C663:GREP  or  ~FEATURE_GREP_CONTEXT
+C664:GREP  or  ~FEATURE_GREP_EGREP_ALIAS
+C665:FEATURE_SUID_CONFIG  or  ~FEATURE_SUID_CONFIG_QUIET
+C666:LOGIN  or  ~LOGIN_SCRIPTS
+C667:LOGIN  or  ~PAM
+C668:LOGIN  or  ~FEATURE_SECURETTY
+C669:LOGIN  or  ~FEATURE_NOLOGIN
+C670:CHAT  or  ~FEATURE_CHAT_CLR_ABORT
+C671:CHAT  or  ~FEATURE_CHAT_SEND_ESCAPES
+C672:CHAT  or  ~FEATURE_CHAT_NOFAIL
+C673:CHAT  or  ~FEATURE_CHAT_IMPLICIT_CR
+C674:CHAT  or  ~FEATURE_CHAT_SWALLOW_OPTS
+C675:CHAT  or  ~FEATURE_CHAT_VAR_ABORT_LEN
+C676:CHAT  or  ~FEATURE_CHAT_TTY_HIFI
+C677:UNXZ  or  ~XZ
+C678:KILL  or  ~KILLALL5
+C679:KILL  or  ~KILLALL
+C680:INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt  or  ~INSTALL_SH_APPLET_SYMLINK
+C681:INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt  or  ~INSTALL_SH_APPLET_HARDLINK
+C682:INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER
+C683:INSTALL_SH_APPLET_SYMLINK  or  INSTALL_SH_APPLET_HARDLINK  or  INSTALL_SH_APPLET_SCRIPT_WRAPPER  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt
+C684:~INSTALL_SH_APPLET_SYMLINK  or  ~INSTALL_SH_APPLET_HARDLINK
+C685:~INSTALL_SH_APPLET_SYMLINK  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER
+C686:~INSTALL_SH_APPLET_HARDLINK  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER
+C687:TAR  or  ~FEATURE_TAR_LONG_OPTIONS
+C688:TAR  or  ~FEATURE_TAR_SELINUX
+C689:TAR  or  ~FEATURE_TAR_NOPRESERVE_TIME
+C690:TAR  or  ~FEATURE_TAR_CREATE
+C691:TAR  or  ~FEATURE_TAR_OLDGNU_COMPATIBILITY
+C692:TAR  or  ~FEATURE_TAR_FROM
+C693:TAR  or  ~FEATURE_TAR_UNAME_GNAME
+C694:TAR  or  ~FEATURE_TAR_GNU_EXTENSIONS
+C695:TAR  or  ~FEATURE_TAR_AUTODETECT
+C696:TAR  or  ~FEATURE_TAR_OLDSUN_COMPATIBILITY
+C697:FEATURE_CPIO_O  or  ~FEATURE_CPIO_P
+C698:MKSWAP  or  ~FEATURE_MKSWAP_UUID
+C699:RUNCON  or  ~FEATURE_RUNCON_LONG_OPTIONS
+C700:LSMOD  or  ~FEATURE_LSMOD_PRETTY_2_6_OUTPUT
+C701:MODPROBE  or  ~FEATURE_MODPROBE_BLACKLIST
+C702:FEATURE_DD_SIGNAL_HANDLING  or  ~FEATURE_DD_THIRD_STATUS_LINE
+C703:DOS2UNIX  or  ~UNIX2DOS
+C704:TEE  or  ~FEATURE_TEE_USE_BLOCK_IO
+C705:RUNSVDIR  or  ~FEATURE_RUNSVDIR_LOG
+C706:FEATURE_EDITING  or  ~FEATURE_EDITING_ASK_TERMINAL
+C707:FEATURE_EDITING  or  ~FEATURE_EDITING_FANCY_PROMPT
+C708:FEATURE_EDITING  or  ~FEATURE_TAB_COMPLETION
+C709:FEATURE_EDITING  or  ~FEATURE_EDITING_HISTORY
+C710:FEATURE_EDITING  or  ~FEATURE_EDITING_MAX_LEN
+C711:FEATURE_EDITING  or  ~FEATURE_EDITING_VI
+C712:FEATURE_EDITING  or  ~FEATURE_EDITING_SAVEHISTORY
+C713:FEATURE_EDITING_HISTORY  or  ~FEATURE_EDITING
+C714:FEATURE_EDITING_MAX_LEN  or  ~FEATURE_EDITING
+C715:HUSH  or  ~HUSH_CASE
+C716:HUSH  or  ~HUSH_RANDOM_SUPPORT
+C717:HUSH  or  ~HUSH_EXPORT_N
+C718:HUSH  or  ~HUSH_INTERACTIVE
+C719:HUSH  or  ~HUSH_FUNCTIONS
+C720:HUSH  or  ~HUSH_BASH_COMPAT
+C721:HUSH  or  ~HUSH_IF
+C722:HUSH  or  ~HUSH_HELP
+C723:HUSH  or  ~HUSH_TICK
+C724:HUSH  or  ~HUSH_LOOPS
+C725:HUSH  or  ~HUSH_MODE_X
+C726:PIDOF  or  ~FEATURE_PIDOF_SINGLE
+C727:PIDOF  or  ~FEATURE_PIDOF_OMIT
+C728:DIFF  or  ~FEATURE_DIFF_LONG_OPTIONS
+C729:DIFF  or  ~FEATURE_DIFF_DIR
+C730:FEATURE_FDISK_WRITABLE  or  ~FEATURE_AIX_LABEL
+C731:FEATURE_FDISK_WRITABLE  or  ~FEATURE_SGI_LABEL
+C732:FEATURE_FDISK_WRITABLE  or  ~FEATURE_GPT_LABEL
+C733:FEATURE_FDISK_WRITABLE  or  ~FEATURE_OSF_LABEL
+C734:FEATURE_FDISK_WRITABLE  or  ~FEATURE_FDISK_ADVANCED
+C735:FEATURE_FDISK_WRITABLE  or  ~FEATURE_SUN_LABEL
+C736:KLOGD  or  ~FEATURE_KLOGD_KLOGCTL
+C737:BEEP  or  ~FEATURE_BEEP_LENGTH_MS
+C738:BEEP  or  ~FEATURE_BEEP_FREQ
+C739:FEATURE_BEEP_LENGTH_MS  or  ~BEEP
+C740:FEATURE_BEEP_FREQ  or  ~BEEP
+C741:NAMEIF  or  ~FEATURE_NAMEIF_EXTENDED
+C742:FEATURE_MAKEDEVS_TABLE_alt  or  ~FEATURE_MAKEDEVS_LEAF
+C743:FEATURE_MAKEDEVS_TABLE_alt  or  ~FEATURE_MAKEDEVS_TABLE
+C744:FEATURE_MAKEDEVS_LEAF  or  FEATURE_MAKEDEVS_TABLE  or  ~FEATURE_MAKEDEVS_TABLE_alt
+C745:~FEATURE_MAKEDEVS_LEAF  or  ~FEATURE_MAKEDEVS_TABLE
+C746:FEATURE_BASH_IS_HUSH_alt  or  ~FEATURE_BASH_IS_ASH
+C747:FEATURE_BASH_IS_HUSH_alt  or  ~FEATURE_BASH_IS_HUSH
+C748:FEATURE_BASH_IS_HUSH_alt  or  ~FEATURE_BASH_IS_NONE
+C749:FEATURE_BASH_IS_ASH  or  FEATURE_BASH_IS_HUSH  or  FEATURE_BASH_IS_NONE  or  ~FEATURE_BASH_IS_HUSH_alt
+C750:~FEATURE_BASH_IS_ASH  or  ~FEATURE_BASH_IS_HUSH
+C751:~FEATURE_BASH_IS_ASH  or  ~FEATURE_BASH_IS_NONE
+C752:~FEATURE_BASH_IS_HUSH  or  ~FEATURE_BASH_IS_NONE
+C753:FEATURE_INSTALLER  or  ~INSTALL_NO_USR
+C754:READLINK  or  ~FEATURE_READLINK_FOLLOW
+C755:TAIL  or  ~FEATURE_FANCY_TAIL
+C756:CROND  or  ~FEATURE_CROND_CALL_SENDMAIL
+C757:CROND  or  ~FEATURE_CROND_D
+C758:CROND  or  ~FEATURE_CROND_DIR
+C759:FEATURE_CROND_DIR  or  ~CROND
+C760:HTTPD  or  ~FEATURE_HTTPD_USE_SENDFILE
+C761:HTTPD  or  ~FEATURE_HTTPD_GZIP
+C762:HTTPD  or  ~FEATURE_HTTPD_SETUID
+C763:HTTPD  or  ~FEATURE_HTTPD_CGI
+C764:HTTPD  or  ~FEATURE_HTTPD_BASIC_AUTH
+C765:HTTPD  or  ~FEATURE_HTTPD_PROXY
+C766:HTTPD  or  ~FEATURE_HTTPD_RANGES
+C767:HTTPD  or  ~FEATURE_HTTPD_ENCODE_URL_STR
+C768:HTTPD  or  ~FEATURE_HTTPD_ERROR_PAGES
+C769:TEST  or  ~FEATURE_TEST_64
+C770:ENV  or  ~FEATURE_ENV_LONG_OPTIONS
+C771:FEATURE_HTTPD_BASIC_AUTH  or  ~FEATURE_HTTPD_AUTH_MD5
+C772:RMDIR  or  ~FEATURE_RMDIR_LONG_OPTIONS
+C773:MAKEDEVS  or  ~FEATURE_MAKEDEVS_TABLE_alt
+C774:FEATURE_MAKEDEVS_TABLE_alt  or  ~MAKEDEVS
+C775:CHCON  or  ~FEATURE_CHCON_LONG_OPTIONS
+C776:INIT  or  ~FEATURE_INIT_COREDUMPS
+C777:INIT  or  ~FEATURE_USE_INITTAB
+C778:INIT  or  ~FEATURE_INIT_SCTTY
+C779:INIT  or  ~FEATURE_INIT_SYSLOG
+C780:INIT  or  ~FEATURE_INITRD
+C781:INIT  or  ~INIT_TERMINAL_TYPE
+C782:INIT  or  ~FEATURE_EXTRA_QUIET
+C783:INIT_TERMINAL_TYPE  or  ~INIT
+C784:INSTALL_APPLET_DONT_alt  or  ~INSTALL_APPLET_SYMLINKS
+C785:INSTALL_APPLET_DONT_alt  or  ~INSTALL_APPLET_HARDLINKS
+C786:INSTALL_APPLET_DONT_alt  or  ~INSTALL_APPLET_SCRIPT_WRAPPERS
+C787:INSTALL_APPLET_DONT_alt  or  ~INSTALL_APPLET_DONT
+C788:INSTALL_APPLET_SYMLINKS  or  INSTALL_APPLET_HARDLINKS  or  INSTALL_APPLET_SCRIPT_WRAPPERS  or  INSTALL_APPLET_DONT  or  ~INSTALL_APPLET_DONT_alt
+C789:~INSTALL_APPLET_SYMLINKS  or  ~INSTALL_APPLET_HARDLINKS
+C790:~INSTALL_APPLET_SYMLINKS  or  ~INSTALL_APPLET_SCRIPT_WRAPPERS
+C791:~INSTALL_APPLET_SYMLINKS  or  ~INSTALL_APPLET_DONT
+C792:~INSTALL_APPLET_HARDLINKS  or  ~INSTALL_APPLET_SCRIPT_WRAPPERS
+C793:~INSTALL_APPLET_HARDLINKS  or  ~INSTALL_APPLET_DONT
+C794:~INSTALL_APPLET_SCRIPT_WRAPPERS  or  ~INSTALL_APPLET_DONT
+C795:TOP  or  ~FEATURE_TOP_CPU_USAGE_PERCENTAGE
+C796:TOP  or  ~FEATURE_SHOW_THREADS
+C797:TOP  or  ~FEATURE_TOP_SMP_PROCESS
+C798:TOP  or  ~FEATURE_TOPMEM
+C799:HWCLOCK  or  ~FEATURE_HWCLOCK_LONG_OPTIONS
+C800:HWCLOCK  or  ~FEATURE_HWCLOCK_ADJTIME_FHS
+C801:FEATURE_TOP_CPU_GLOBAL_PERCENTS  or  ~FEATURE_TOP_SMP_CPU
+C802:TELNETD  or  ~FEATURE_TELNETD_STANDALONE
+C803:FIND  or  ~FEATURE_FIND_REGEX
+C804:FIND  or  ~FEATURE_FIND_DELETE
+C805:FIND  or  ~FEATURE_FIND_MAXDEPTH
+C806:FIND  or  ~FEATURE_FIND_NOT
+C807:FIND  or  ~FEATURE_FIND_PRINT0
+C808:FIND  or  ~FEATURE_FIND_NEWER
+C809:FIND  or  ~FEATURE_FIND_CONTEXT
+C810:FIND  or  ~FEATURE_FIND_PERM
+C811:FIND  or  ~FEATURE_FIND_USER
+C812:FIND  or  ~FEATURE_FIND_MMIN
+C813:FIND  or  ~FEATURE_FIND_PRUNE
+C814:FIND  or  ~FEATURE_FIND_INUM
+C815:FIND  or  ~FEATURE_FIND_GROUP
+C816:FIND  or  ~FEATURE_FIND_TYPE
+C817:FIND  or  ~FEATURE_FIND_LINKS
+C818:FIND  or  ~FEATURE_FIND_PAREN
+C819:FIND  or  ~FEATURE_FIND_XDEV
+C820:FIND  or  ~FEATURE_FIND_SIZE
+C821:FIND  or  ~FEATURE_FIND_MTIME
+C822:FIND  or  ~FEATURE_FIND_EXEC
+C823:FIND  or  ~FEATURE_FIND_DEPTH
+C824:FIND  or  ~FEATURE_FIND_PATH
+C825:UMOUNT  or  ~FEATURE_UMOUNT_ALL
+C826:SORT  or  ~FEATURE_SORT_BIG
+C827:BBCONFIG  or  ~FEATURE_COMPRESS_BBCONFIG
+C828:HEAD  or  ~FEATURE_FANCY_HEAD
+C829:HUSH_INTERACTIVE  or  ~HUSH_SAVEHISTORY
+C830:HUSH_INTERACTIVE  or  ~HUSH_JOB
+C831:DEBUG  or  ~DEBUG_PESSIMIZE
+C832:NETSTAT  or  ~FEATURE_NETSTAT_WIDE
+C833:NETSTAT  or  ~FEATURE_NETSTAT_PRG
+C834:FBSET  or  ~FEATURE_FBSET_FANCY
+C835:FBSET  or  ~FEATURE_FBSET_READMODE
+C836:INSTALL  or  ~FEATURE_INSTALL_LONG_OPTIONS
+C837:FEATURE_USE_INITTAB  or  ~FEATURE_KILL_REMOVED
+C838:FEATURE_MDEV_CONF  or  ~FEATURE_MDEV_EXEC
+C839:FEATURE_MDEV_CONF  or  ~FEATURE_MDEV_RENAME
+C840:SPLIT  or  ~FEATURE_SPLIT_FANCY
+C841:ASH  or  ~ASH_BUILTIN_PRINTF
+C842:ASH  or  ~ASH_ALIAS
+C843:ASH  or  ~ASH_CMDCMD
+C844:ASH  or  ~ASH_BASH_COMPAT
+C845:ASH  or  ~ASH_MAIL
+C846:ASH  or  ~ASH_BUILTIN_ECHO
+C847:ASH  or  ~ASH_JOB_CONTROL
+C848:ASH  or  ~ASH_GETOPTS
+C849:ASH  or  ~ASH_OPTIMIZE_FOR_SIZE
+C850:ASH  or  ~ASH_BUILTIN_TEST
+C851:ASH  or  ~ASH_RANDOM_SUPPORT
+C852:ASH  or  ~ASH_EXPAND_PRMT
+C853:MKDIR  or  ~FEATURE_MKDIR_LONG_OPTIONS
+C854:FEATURE_IPC_SYSLOG  or  ~FEATURE_IPC_SYSLOG_BUFFER_SIZE
+C855:FEATURE_IPC_SYSLOG  or  ~LOGREAD
+C856:FEATURE_IPC_SYSLOG_BUFFER_SIZE  or  ~FEATURE_IPC_SYSLOG
+C857:STAT  or  ~FEATURE_STAT_FORMAT
+C858:GETOPT  or  ~FEATURE_GETOPT_LONG
+C859:FEATURE_HTTPD_CGI  or  ~FEATURE_HTTPD_SET_REMOTE_PORT_TO_ENV
+C860:FEATURE_HTTPD_CGI  or  ~FEATURE_HTTPD_CONFIG_WITH_SCRIPT_INTERPR
+C861:FEATURE_LESS_DASHCMD  or  ~FEATURE_LESS_LINENUMS
+C862:BUILD_LIBBUSYBOX  or  ~FEATURE_SHARED_BUSYBOX
+C863:BUILD_LIBBUSYBOX  or  ~FEATURE_INDIVIDUAL
+C864:POPMAILDIR  or  ~FEATURE_POPMAILDIR_DELIVERY
+C865:DELGROUP  or  ~FEATURE_DEL_USER_FROM_GROUP
+C866:USE_BB_CRYPT  or  ~USE_BB_CRYPT_SHA
+C867:REFORMIME  or  ~FEATURE_REFORMIME_COMPAT
+C868:AWK  or  ~FEATURE_AWK_LIBM
+C869:IPCALC  or  ~FEATURE_IPCALC_LONG_OPTIONS
+C870:IPCALC  or  ~FEATURE_IPCALC_FANCY
+C871:SH_MATH_SUPPORT  or  ~SH_MATH_SUPPORT_64
+C872:DEVFSD  or  ~DEVFSD_MODLOAD
+C873:DEVFSD  or  ~DEVFSD_VERBOSE
+C874:DEVFSD  or  ~DEVFSD_FG_NP
+C875:SHOW_USAGE  or  ~FEATURE_COMPRESS_USAGE
+C876:SHOW_USAGE  or  ~FEATURE_VERBOSE_USAGE
+C877:ADDGROUP  or  ~FEATURE_ADDUSER_TO_GROUP
+C878:ADDGROUP  or  ~FEATURE_ADDGROUP_LONG_OPTIONS
+C879:FEATURE_TAR_LONG_OPTIONS  or  ~FEATURE_TAR_TO_COMMAND
+C880:CHOWN  or  ~FEATURE_CHOWN_LONG_OPTIONS
+C881:RESIZE  or  ~FEATURE_RESIZE_PRINT
+C882:WGET  or  ~FEATURE_WGET_TIMEOUT
+C883:WGET  or  ~FEATURE_WGET_STATUSBAR
+C884:WGET  or  ~FEATURE_WGET_AUTHENTICATION
+C885:WGET  or  ~FEATURE_WGET_LONG_OPTIONS
+C886:EJECT  or  ~FEATURE_EJECT_SCSI
+C887:FTPD  or  ~FEATURE_FTP_WRITE
+C888:FTPD  or  ~FEATURE_FTPD_ACCEPT_BROKEN_LIST
+C889:FEATURE_FANCY_SLEEP  or  ~FEATURE_FLOAT_SLEEP
+C890:FEATURE_INSMOD_LOAD_MAP  or  ~FEATURE_INSMOD_LOAD_MAP_FULL
+C891:RUN_PARTS  or  ~FEATURE_RUN_PARTS_LONG_OPTIONS
+C892:RUN_PARTS  or  ~FEATURE_RUN_PARTS_FANCY
+C893:MOUNT  or  ~FEATURE_MOUNT_FSTAB
+C894:MOUNT  or  ~FEATURE_MOUNT_FAKE
+C895:MOUNT  or  ~FEATURE_MOUNT_FLAGS
+C896:MOUNT  or  ~FEATURE_MOUNT_LABEL
+C897:MOUNT  or  ~FEATURE_MOUNT_VERBOSE
+C898:MOUNT  or  ~FEATURE_MOUNT_NFS
+C899:MOUNT  or  ~FEATURE_MOUNT_CIFS
+C900:MOUNT  or  ~FEATURE_MOUNT_HELPERS
+C901:UNICODE_SUPPORT  or  ~SUBST_WCHAR
+C902:UNICODE_SUPPORT  or  ~UNICODE_WIDE_WCHARS
+C903:UNICODE_SUPPORT  or  ~UNICODE_COMBINING_WCHARS
+C904:UNICODE_SUPPORT  or  ~UNICODE_USING_LOCALE
+C905:UNICODE_SUPPORT  or  ~UNICODE_BIDI_SUPPORT
+C906:UNICODE_SUPPORT  or  ~UNICODE_PRESERVE_BROKEN
+C907:UNICODE_SUPPORT  or  ~LAST_SUPPORTED_WCHAR
+C908:UNICODE_SUPPORT  or  ~FEATURE_CHECK_UNICODE_IN_ENV
+C909:SUBST_WCHAR  or  ~UNICODE_SUPPORT
+C910:LAST_SUPPORTED_WCHAR  or  ~UNICODE_SUPPORT
+C911:DATE  or  ~FEATURE_DATE_ISOFMT
+C912:DATE  or  ~FEATURE_DATE_NANO
+C913:DATE  or  ~FEATURE_DATE_COMPAT
+C914:TASKSET  or  ~FEATURE_TASKSET_FANCY
+C915:LZOP  or  ~LZOP_COMPR_HIGH
+C916:FEATURE_IFUPDOWN_IP  or  ~FEATURE_IFUPDOWN_IFCONFIG_BUILTIN
+C917:FEATURE_IFUPDOWN_IP  or  ~FEATURE_IFUPDOWN_IP_BUILTIN
+C918:DMESG  or  ~FEATURE_DMESG_PRETTY
+C919:UDHCPD  or  ~DHCPD_LEASES_FILE
+C920:UDHCPD  or  ~FEATURE_UDHCPD_WRITE_LEASES_EARLY
+C921:UDHCPD  or  ~DHCPRELAY
+C922:UDHCPD  or  ~DUMPLEASES
+C923:DHCPD_LEASES_FILE  or  ~UDHCPD
+C924:FEATURE_MOUNT_LOOP  or  ~FEATURE_MOUNT_LOOP_CREATE
+C925:UDHCPC  or  ~FEATURE_UDHCPC_ARPING
+C926:FEATURE_LS_COLOR  or  ~FEATURE_LS_COLOR_IS_DEFAULT
+C927:FEATURE_BRCTL_FANCY  or  ~FEATURE_BRCTL_SHOW
+C928:~UNICODE_USING_LOCALE  or  UNICODE_SUPPORT
+C929:~UNICODE_USING_LOCALE  or  LOCALE_SUPPORT
+C930:~FEATURE_CHECK_UNICODE_IN_ENV  or  UNICODE_SUPPORT
+C931:~FEATURE_CHECK_UNICODE_IN_ENV  or  ~UNICODE_USING_LOCALE
+C932:~UNICODE_BIDI_SUPPORT  or  UNICODE_SUPPORT
+C933:~UNICODE_BIDI_SUPPORT  or  ~UNICODE_USING_LOCALE
+C934:FEATURE_SYSLOG  or  ~NAMEIF  or  ~PLATFORM_LINUX
+C935:FEATURE_SYSLOG  or  ~ZCIP  or  ~PLATFORM_LINUX
+C936:FEATURE_SYSLOG  or  ~FEATURE_MOUNT_NFS  or  ~MOUNT
+C937:FEATURE_SYSLOG  or  ~DEVFSD  or  ~PLATFORM_LINUX
+C938:FEATURE_SYSLOG  or  ~SULOGIN
+C939:FEATURE_SYSLOG  or  ~PASSWD
+C940:FEATURE_SYSLOG  or  ~CROND
+C941:FEATURE_SYSLOG  or  ~FAKEIDENTD
+C942:FEATURE_SYSLOG  or  ~LOGIN
+C943:FEATURE_SYSLOG  or  ~INIT
+C944:FEATURE_SYSLOG  or  ~INETD
+C945:FEATURE_SYSLOG  or  ~LOGGER
+C946:FEATURE_SYSLOG  or  ~GETTY
+C947:FEATURE_SYSLOG  or  ~SU
+C948:FEATURE_SYSLOG  or  ~TELNETD
+C949:~FEATURE_SYSLOG  or  SULOGIN  or  PASSWD  or  CROND  or  FAKEIDENTD  or  LOGIN  or  INIT  or  INETD  or  LOGGER  or  GETTY  or  SU  or  TELNETD  or  NAMEIF  or  ZCIP  or  FEATURE_MOUNT_NFS  or  DEVFSD
+C950:~FEATURE_SYSLOG  or  SULOGIN  or  PASSWD  or  CROND  or  FAKEIDENTD  or  LOGIN  or  INIT  or  INETD  or  LOGGER  or  GETTY  or  SU  or  TELNETD  or  NAMEIF  or  ZCIP  or  MOUNT  or  DEVFSD
+C951:~FEATURE_SYSLOG  or  SULOGIN  or  PASSWD  or  CROND  or  FAKEIDENTD  or  LOGIN  or  INIT  or  INETD  or  LOGGER  or  GETTY  or  SU  or  TELNETD  or  PLATFORM_LINUX  or  FEATURE_MOUNT_NFS
+C952:~FEATURE_SYSLOG  or  SULOGIN  or  PASSWD  or  CROND  or  FAKEIDENTD  or  LOGIN  or  INIT  or  INETD  or  LOGGER  or  GETTY  or  SU  or  TELNETD  or  PLATFORM_LINUX  or  MOUNT
+C953:FEATURE_HAVE_RPC  or  ~FEATURE_MOUNT_NFS  or  ~MOUNT
+C954:FEATURE_HAVE_RPC  or  ~FEATURE_INETD_RPC  or  ~INETD
+C955:~FEATURE_HAVE_RPC  or  FEATURE_MOUNT_NFS  or  FEATURE_INETD_RPC
+C956:~FEATURE_HAVE_RPC  or  FEATURE_MOUNT_NFS  or  INETD
+C957:~FEATURE_HAVE_RPC  or  MOUNT  or  FEATURE_INETD_RPC
+C958:~FEATURE_HAVE_RPC  or  MOUNT  or  INETD
+C959:~STATIC  or  ~PIE
+C960:~BUILD_LIBBUSYBOX  or  ~FEATURE_PREFER_APPLETS
+C961:~BUILD_LIBBUSYBOX  or  ~PIE
+C962:~BUILD_LIBBUSYBOX  or  ~STATIC
+C963:FEATURE_INSTALLER  or  FEATURE_SH_STANDALONE  or  FEATURE_PREFER_APPLETS  or  ~INSTALL_APPLET_DONT
+C964:MORE  or  TOP  or  POWERTOP  or  ~FEATURE_USE_TERMIOS
+C965:GZIP  or  ~FEATURE_GZIP_LONG_OPTIONS
+C966:LONG_OPTS  or  ~FEATURE_GZIP_LONG_OPTIONS
+C967:FEATURE_SEAMLESS_Z  or  FEATURE_SEAMLESS_GZ  or  FEATURE_SEAMLESS_BZ2  or  FEATURE_SEAMLESS_LZMA  or  FEATURE_SEAMLESS_XZ  or  ~FEATURE_TAR_AUTODETECT
+C968:TAR  or  ~FEATURE_TAR_AUTODETECT
+C969:TAR  or  ~FEATURE_TAR_LONG_OPTIONS
+C970:LONG_OPTS  or  ~FEATURE_TAR_LONG_OPTIONS
+C971:~FEATURE_TAR_SELINUX  or  TAR
+C972:~FEATURE_TAR_SELINUX  or  SELINUX
+C973:CHOWN  or  ~FEATURE_CHOWN_LONG_OPTIONS
+C974:LONG_OPTS  or  ~FEATURE_CHOWN_LONG_OPTIONS
+C975:CP  or  ~FEATURE_CP_LONG_OPTIONS
+C976:LONG_OPTS  or  ~FEATURE_CP_LONG_OPTIONS
+C977:~DOS2UNIX  or  UNIX2DOS
+C978:~UNIX2DOS  or  DOS2UNIX
+C979:ENV  or  ~FEATURE_ENV_LONG_OPTIONS
+C980:LONG_OPTS  or  ~FEATURE_ENV_LONG_OPTIONS
+C981:EXPAND  or  ~FEATURE_EXPAND_LONG_OPTIONS
+C982:LONG_OPTS  or  ~FEATURE_EXPAND_LONG_OPTIONS
+C983:INSTALL  or  ~FEATURE_INSTALL_LONG_OPTIONS
+C984:LONG_OPTS  or  ~FEATURE_INSTALL_LONG_OPTIONS
+C985:LS  or  ~FEATURE_LS_COLOR
+C986:LONG_OPTS  or  ~FEATURE_LS_COLOR
+C987:MKDIR  or  ~FEATURE_MKDIR_LONG_OPTIONS
+C988:LONG_OPTS  or  ~FEATURE_MKDIR_LONG_OPTIONS
+C989:MV  or  ~FEATURE_MV_LONG_OPTIONS
+C990:LONG_OPTS  or  ~FEATURE_MV_LONG_OPTIONS
+C991:RMDIR  or  ~FEATURE_RMDIR_LONG_OPTIONS
+C992:LONG_OPTS  or  ~FEATURE_RMDIR_LONG_OPTIONS
+C993:UNEXPAND  or  ~FEATURE_UNEXPAND_LONG_OPTIONS
+C994:LONG_OPTS  or  ~FEATURE_UNEXPAND_LONG_OPTIONS
+C995:FEATURE_UTMP  or  ~WHO
+C996:CP  or  MV  or  ~FEATURE_PRESERVE_HARDLINKS
+C997:LS  or  MORE  or  TELNET  or  ~FEATURE_AUTOWIDTH
+C998:DF  or  DU  or  LS  or  ~FEATURE_HUMAN_READABLE
+C999:MD5SUM  or  SHA1SUM  or  SHA256SUM  or  SHA512SUM  or  ~FEATURE_MD5_SHA1_SUM_CHECK
+C1000:SETCONSOLE  or  ~FEATURE_SETCONSOLE_LONG_OPTIONS
+C1001:LONG_OPTS  or  ~FEATURE_SETCONSOLE_LONG_OPTIONS
+C1002:LOADFONT  or  SETFONT  or  ~FEATURE_LOADFONT_PSF2
+C1003:LOADFONT  or  SETFONT  or  ~FEATURE_LOADFONT_RAW
+C1004:RUN_PARTS  or  ~FEATURE_RUN_PARTS_LONG_OPTIONS
+C1005:LONG_OPTS  or  ~FEATURE_RUN_PARTS_LONG_OPTIONS
+C1006:START_STOP_DAEMON  or  ~FEATURE_START_STOP_DAEMON_LONG_OPTIONS
+C1007:LONG_OPTS  or  ~FEATURE_START_STOP_DAEMON_LONG_OPTIONS
+C1008:DIFF  or  ~FEATURE_DIFF_LONG_OPTIONS
+C1009:LONG_OPTS  or  ~FEATURE_DIFF_LONG_OPTIONS
+C1010:FIND  or  ~FEATURE_FIND_DELETE
+C1011:FEATURE_FIND_DEPTH  or  ~FEATURE_FIND_DELETE
+C1012:~FEATURE_FIND_CONTEXT  or  FIND
+C1013:~FEATURE_FIND_CONTEXT  or  SELINUX
+C1014:HALT  or  ~FEATURE_CALL_TELINIT
+C1015:~INIT  or  ~FEATURE_CALL_TELINIT
+C1016:USE_BB_PWD_GRP  or  ~USE_BB_SHADOW
+C1017:FEATURE_SHADOWPASSWDS  or  ~USE_BB_SHADOW
+C1018:ADDUSER  or  ~FEATURE_ADDUSER_LONG_OPTIONS
+C1019:LONG_OPTS  or  ~FEATURE_ADDUSER_LONG_OPTIONS
+C1020:ADDGROUP  or  ~FEATURE_ADDGROUP_LONG_OPTIONS
+C1021:LONG_OPTS  or  ~FEATURE_ADDGROUP_LONG_OPTIONS
+C1022:~INSMOD  or  PLATFORM_LINUX
+C1023:~INSMOD  or  ~MODPROBE_SMALL
+C1024:~RMMOD  or  PLATFORM_LINUX
+C1025:~RMMOD  or  ~MODPROBE_SMALL
+C1026:~LSMOD  or  PLATFORM_LINUX
+C1027:~LSMOD  or  ~MODPROBE_SMALL
+C1028:~MODPROBE  or  PLATFORM_LINUX
+C1029:~MODPROBE  or  ~MODPROBE_SMALL
+C1030:~DEPMOD  or  PLATFORM_LINUX
+C1031:~DEPMOD  or  ~MODPROBE_SMALL
+C1032:~FEATURE_2_4_MODULES  or  INSMOD  or  RMMOD  or  LSMOD
+C1033:~FEATURE_2_4_MODULES  or  PLATFORM_LINUX
+C1034:~FEATURE_INSMOD_TRY_MMAP  or  INSMOD  or  MODPROBE_SMALL
+C1035:~FEATURE_INSMOD_TRY_MMAP  or  PLATFORM_LINUX
+C1036:~FEATURE_INSMOD_VERSION_CHECKING  or  INSMOD  or  MODPROBE
+C1037:~FEATURE_INSMOD_VERSION_CHECKING  or  PLATFORM_LINUX
+C1038:~FEATURE_INSMOD_VERSION_CHECKING  or  FEATURE_2_4_MODULES
+C1039:~FEATURE_INSMOD_KSYMOOPS_SYMBOLS  or  INSMOD  or  MODPROBE
+C1040:~FEATURE_INSMOD_KSYMOOPS_SYMBOLS  or  PLATFORM_LINUX
+C1041:~FEATURE_INSMOD_KSYMOOPS_SYMBOLS  or  FEATURE_2_4_MODULES
+C1042:~FEATURE_INSMOD_LOADINKMEM  or  INSMOD  or  MODPROBE
+C1043:~FEATURE_INSMOD_LOADINKMEM  or  PLATFORM_LINUX
+C1044:~FEATURE_INSMOD_LOADINKMEM  or  FEATURE_2_4_MODULES
+C1045:~FEATURE_INSMOD_LOAD_MAP  or  PLATFORM_LINUX
+C1046:~FEATURE_INSMOD_LOAD_MAP  or  FEATURE_2_4_MODULES
+C1047:~FEATURE_INSMOD_LOAD_MAP  or  INSMOD
+C1048:LSMOD  or  FEATURE_2_4_MODULES  or  ~FEATURE_CHECK_TAINTED_MODULE
+C1049:PLATFORM_LINUX  or  ~FEATURE_CHECK_TAINTED_MODULE
+C1050:~MODPROBE_SMALL  or  ~FEATURE_CHECK_TAINTED_MODULE
+C1051:DEPMOD  or  MODPROBE  or  ~FEATURE_MODUTILS_ALIAS
+C1052:PLATFORM_LINUX  or  ~FEATURE_MODUTILS_ALIAS
+C1053:DEPMOD  or  MODPROBE  or  ~FEATURE_MODUTILS_SYMBOLS
+C1054:PLATFORM_LINUX  or  ~FEATURE_MODUTILS_SYMBOLS
+C1055:FDISK  or  ~FDISK_SUPPORT_LARGE_DISKS  or  LFS
+C1056:FDISK  or  FDISK_SUPPORT_LARGE_DISKS  or  ~LFS
+C1057:FSCK_MINIX  or  MKFS_MINIX  or  ~FEATURE_MINIX2
+C1058:HWCLOCK  or  ~FEATURE_HWCLOCK_LONG_OPTIONS
+C1059:LONG_OPTS  or  ~FEATURE_HWCLOCK_LONG_OPTIONS
+C1060:MOUNT  or  FEATURE_MOUNT_FAKE  or  ~FEATURE_MTAB_SUPPORT  or  ~UMOUNT
+C1061:MOUNT  or  ~FEATURE_MOUNT_FAKE  or  UMOUNT
+C1062:MOUNT  or  ~FEATURE_MOUNT_FAKE  or  FEATURE_MTAB_SUPPORT
+C1063:MOUNT  or  UMOUNT  or  ~FEATURE_MOUNT_LOOP
+C1064:MOUNT  or  UMOUNT  or  ~FEATURE_MTAB_SUPPORT
+C1065:VOLUMEID  or  ~FEATURE_MOUNT_LABEL  or  ~MOUNT
+C1066:VOLUMEID  or  ~FINDFS  or  ~PLATFORM_LINUX
+C1067:VOLUMEID  or  ~BLKID  or  ~PLATFORM_LINUX
+C1068:~VOLUMEID  or  FEATURE_MOUNT_LABEL  or  FINDFS  or  BLKID
+C1069:~VOLUMEID  or  FEATURE_MOUNT_LABEL  or  PLATFORM_LINUX
+C1070:~VOLUMEID  or  MOUNT  or  FINDFS  or  BLKID
+C1071:~VOLUMEID  or  MOUNT  or  PLATFORM_LINUX
+C1072:VOLUMEID  or  ~FEATURE_VOLUMEID_EXT
+C1073:VOLUMEID  or  ~FEATURE_VOLUMEID_BTRFS
+C1074:VOLUMEID  or  ~FEATURE_VOLUMEID_REISERFS
+C1075:VOLUMEID  or  ~FEATURE_VOLUMEID_FAT
+C1076:VOLUMEID  or  ~FEATURE_VOLUMEID_HFS
+C1077:VOLUMEID  or  ~FEATURE_VOLUMEID_JFS
+C1078:VOLUMEID  or  ~FEATURE_VOLUMEID_XFS
+C1079:VOLUMEID  or  ~FEATURE_VOLUMEID_NTFS
+C1080:VOLUMEID  or  ~FEATURE_VOLUMEID_ISO9660
+C1081:VOLUMEID  or  ~FEATURE_VOLUMEID_UDF
+C1082:VOLUMEID  or  ~FEATURE_VOLUMEID_LUKS
+C1083:VOLUMEID  or  ~FEATURE_VOLUMEID_LINUXSWAP
+C1084:VOLUMEID  or  ~FEATURE_VOLUMEID_CRAMFS
+C1085:VOLUMEID  or  ~FEATURE_VOLUMEID_ROMFS
+C1086:VOLUMEID  or  ~FEATURE_VOLUMEID_SYSV
+C1087:VOLUMEID  or  ~FEATURE_VOLUMEID_OCFS2
+C1088:VOLUMEID  or  ~FEATURE_VOLUMEID_LINUXRAID
+C1089:FEATURE_WTMP  or  ~LAST
+C1090:LFS  or  ~READAHEAD
+C1091:PLATFORM_LINUX  or  ~READAHEAD
+C1092:FEATURE_IPV6  or  ~FEATURE_PREFER_IPV4_ADDRESS
+C1093:FTPGET  or  FTPPUT  or  ~FEATURE_FTPGETPUT_LONG_OPTIONS
+C1094:LONG_OPTS  or  ~FEATURE_FTPGETPUT_LONG_OPTIONS
+C1095:~FEATURE_IFUPDOWN_IFCONFIG_BUILTIN  or  IFUPDOWN
+C1096:~FEATURE_IFUPDOWN_IFCONFIG_BUILTIN  or  ~FEATURE_IFUPDOWN_IP
+C1097:IFUPDOWN  or  ~FEATURE_IFUPDOWN_IPV6
+C1098:FEATURE_IPV6  or  ~FEATURE_IFUPDOWN_IPV6
+C1099:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_ADDRESS  or  IPADDR
+C1100:~IPADDR  or  FEATURE_IP_SHORT_FORMS
+C1101:~IPADDR  or  FEATURE_IP_ADDRESS
+C1102:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_LINK  or  IPLINK
+C1103:~IPLINK  or  FEATURE_IP_SHORT_FORMS
+C1104:~IPLINK  or  FEATURE_IP_LINK
+C1105:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_ROUTE  or  IPROUTE
+C1106:~IPROUTE  or  FEATURE_IP_SHORT_FORMS
+C1107:~IPROUTE  or  FEATURE_IP_ROUTE
+C1108:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_TUNNEL  or  IPTUNNEL
+C1109:~IPTUNNEL  or  FEATURE_IP_SHORT_FORMS
+C1110:~IPTUNNEL  or  FEATURE_IP_TUNNEL
+C1111:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_RULE  or  IPRULE
+C1112:~IPRULE  or  FEATURE_IP_SHORT_FORMS
+C1113:~IPRULE  or  FEATURE_IP_RULE
+C1114:IPCALC  or  ~FEATURE_IPCALC_LONG_OPTIONS
+C1115:LONG_OPTS  or  ~FEATURE_IPCALC_LONG_OPTIONS
+C1116:FEATURE_IPV6  or  ~PING6
+C1117:PING  or  ~PING6
+C1118:TFTP  or  ~FEATURE_TFTP_PROGRESS_BAR
+C1119:FEATURE_TFTP_BLOCKSIZE  or  ~FEATURE_TFTP_PROGRESS_BAR
+C1120:FEATURE_IPV6  or  ~TRACEROUTE6
+C1121:TRACEROUTE  or  ~TRACEROUTE6
+C1122:IFUPDOWN  or  ~IFUPDOWN_UDHCPC_CMD_OPTIONS
+C1123:UDHCPC  or  ~IFUPDOWN_UDHCPC_CMD_OPTIONS
+C1124:WGET  or  ~FEATURE_WGET_LONG_OPTIONS
+C1125:LONG_OPTS  or  ~FEATURE_WGET_LONG_OPTIONS
+C1126:PS  or  ~FEATURE_PS_TIME
+C1127:DESKTOP  or  ~FEATURE_PS_TIME
+C1128:PLATFORM_LINUX  or  ~FEATURE_PS_TIME
+C1129:PS  or  ~FEATURE_PS_ADDITIONAL_COLUMNS
+C1130:DESKTOP  or  ~FEATURE_PS_ADDITIONAL_COLUMNS
+C1131:FEATURE_PS_TIME  or  ~FEATURE_PS_UNUSUAL_SYSTEMS
+C1132:SELINUX  or  ~CHCON
+C1133:SELINUX  or  ~FEATURE_CHCON_LONG_OPTIONS
+C1134:CHCON  or  ~FEATURE_CHCON_LONG_OPTIONS
+C1135:LONG_OPTS  or  ~FEATURE_CHCON_LONG_OPTIONS
+C1136:SELINUX  or  ~GETENFORCE
+C1137:SELINUX  or  ~GETSEBOOL
+C1138:SELINUX  or  ~LOAD_POLICY
+C1139:SELINUX  or  ~MATCHPATHCON
+C1140:SELINUX  or  ~RESTORECON
+C1141:SELINUX  or  ~RUNCON
+C1142:SELINUX  or  ~FEATURE_RUNCON_LONG_OPTIONS
+C1143:RUNCON  or  ~FEATURE_RUNCON_LONG_OPTIONS
+C1144:LONG_OPTS  or  ~FEATURE_RUNCON_LONG_OPTIONS
+C1145:SELINUX  or  ~SELINUXENABLED
+C1146:SELINUX  or  ~SETENFORCE
+C1147:SELINUX  or  ~SETFILES
+C1148:SELINUX  or  ~SETSEBOOL
+C1149:SELINUX  or  ~SESTATUS
+C1150:~NOMMU  or  ~ASH
+C1151:HUSH_INTERACTIVE  or  ~HUSH_SAVEHISTORY
+C1152:FEATURE_EDITING_SAVEHISTORY  or  ~HUSH_SAVEHISTORY
+C1153:~FEATURE_SH_IS_ASH  or  ASH
+C1154:~FEATURE_SH_IS_ASH  or  ~NOMMU
+C1155:HUSH  or  ~FEATURE_SH_IS_HUSH
+C1156:~FEATURE_BASH_IS_ASH  or  ASH
+C1157:~FEATURE_BASH_IS_ASH  or  ~NOMMU
+C1158:HUSH  or  ~FEATURE_BASH_IS_HUSH
+C1159:ASH  or  HUSH  or  ~SH_MATH_SUPPORT
+C1160:HUSH  or  ASH  or  ~FEATURE_SH_EXTRA_QUIET
+C1161:~FEATURE_SH_STANDALONE  or  HUSH  or  ASH
+C1162:~FEATURE_SH_STANDALONE  or  FEATURE_PREFER_APPLETS
+C1163:~FEATURE_SH_NOFORK  or  HUSH  or  ASH
+C1164:~FEATURE_SH_NOFORK  or  FEATURE_PREFER_APPLETS
+</constraints>
+</feature_model>
 
-    created() {
-        this.showTutorial = !localStorage.fileDetailTutorialCompleted;
+    `
+  }),
+
+  async mounted() {
+    this.loading = true;
+    await this.getFile();
+    this.loading = false;
+    //await this.fetchFeatureModelOfFamily(this.family.id)
+  },
+
+  watch: {
+    selectedRightFM: function (newValue) {
+      console.log(newValue);
     },
+  },
 
-    computed: {
-        isRightFmSelected() {
-            return this.selectedRightFM !== -1;
+  created() {
+    this.showTutorial = !localStorage.fileDetailTutorialCompleted;
+  },
+
+  computed: {
+    isRightFmSelected() {
+      return this.selectedRightFM !== -1;
+    },
+    getMyFM() {
+      return this.$store.state.featureModels.filter((item) => item.owner);
+    },
+    getStati() {
+      /*function compute(amount) {
+          return (
+              (this.itemsAnalysis.filter((obj) => obj.status === amount)
+                  .length /
+                  this.itemsAnalysis.length) *
+              100
+          );
+      }*/
+      return {
+        success: {
+          percentage:
+              (this.itemsAnalysis.filter((obj) => obj.status === 1)
+                      .length /
+                  this.itemsAnalysis.length) *
+              100,
+          absolute: this.itemsAnalysis.filter(
+              (obj) => obj.status === 1
+          ).length,
         },
-        getMyFM() {
-            return this.$store.state.featureModels.filter((item) => item.owner);
+        error: {
+          percentage:
+              (this.itemsAnalysis.filter((obj) => obj.status === -1)
+                      .length /
+                  this.itemsAnalysis.length) *
+              100,
+          absolute: this.itemsAnalysis.filter(
+              (obj) => obj.status === -1
+          ).length,
         },
-        getStati() {
-            /*function compute(amount) {
-                return (
-                    (this.itemsAnalysis.filter((obj) => obj.status === amount)
-                        .length /
-                        this.itemsAnalysis.length) *
-                    100
-                );
-            }*/
-            return {
-                success: {
-                    percentage:
-                        (this.itemsAnalysis.filter((obj) => obj.status === 1)
-                            .length /
-                            this.itemsAnalysis.length) *
-                        100,
-                    absolute: this.itemsAnalysis.filter(
-                        (obj) => obj.status === 1
-                    ).length,
-                },
-                error: {
-                    percentage:
-                        (this.itemsAnalysis.filter((obj) => obj.status === -1)
-                            .length /
-                            this.itemsAnalysis.length) *
-                        100,
-                    absolute: this.itemsAnalysis.filter(
-                        (obj) => obj.status === -1
-                    ).length,
-                },
-                progress: {
-                    percentage:
-                        (this.itemsAnalysis.filter((obj) => obj.status === 0)
-                            .length /
-                            this.itemsAnalysis.length) *
-                        100,
-                    absolute: this.itemsAnalysis.filter(
-                        (obj) => obj.status === 0
-                    ).length,
-                },
-                amount: this.itemsAnalysis.length,
-            };
+        progress: {
+          percentage:
+              (this.itemsAnalysis.filter((obj) => obj.status === 0)
+                      .length /
+                  this.itemsAnalysis.length) *
+              100,
+          absolute: this.itemsAnalysis.filter(
+              (obj) => obj.status === 0
+          ).length,
         },
+        amount: this.itemsAnalysis.length,
+      };
     },
+  },
 
-    methods: {
-        async getFile() {
-            const id = this.$route.params.id;
-            await api
-                .get(`${API_URL}files/uploaded/confirmed/${id}/`)
-                .then((response) => {
-                    this.file = response.data;
-                })
-                .catch((error) => {
-                    console.log(error);
-                });
-        },
-        deleteItem() {
-            this.dialogDelete = true;
-        },
-        closeDelete() {
-            this.dialogDelete = false;
-        },
-        async deleteItemConfirm() {
-            this.removeLoading = true;
-            await this.$store.dispatch('deleteFeatureModel', this.file.id);
-            await this.$store.dispatch('fetchFiles');
-            this.removeLoading = false;
-            await this.$router.push('/');
-        },
-        showArtifactDialog(item) {
-            this.selectedArtifact = item;
-            this.dialogArtifact = true;
-        },
-        async compare() {
-            this.shouldCompare = true;
-            this.loadingComparableFM = true;
-            await this.$store.dispatch('fetchFeatureModels');
-            this.loadingComparableFM = false;
-        },
-        /*async fetchFeatureModelOfFamily(value) {
-			await api
-				.get(`${API_URL}files/uploaded/confirmed/?family=${value}`)
-				.then((response) => {
-					this.files = response.data
-					this.loadingTable = false
-				})
-		},*/
+  methods: {
+    async getFile() {
+      const id = this.$route.params.id;
+      await api
+          .get(`${API_URL}files/uploaded/confirmed/${id}/`)
+          .then((response) => {
+            this.file = response.data;
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+    },
+    deleteItem() {
+      this.dialogDelete = true;
+    },
+    closeDelete() {
+      this.dialogDelete = false;
+    },
+    async deleteItemConfirm() {
+      this.removeLoading = true;
+      await this.$store.dispatch('deleteFeatureModel', this.file.id);
+      await this.$store.dispatch('fetchFiles');
+      this.removeLoading = false;
+      await this.$router.push('/');
+    },
+    showArtifactDialog(item) {
+      this.selectedArtifact = item;
+      this.dialogArtifact = true;
+    },
+    async compare() {
+      this.shouldCompare = true;
+      this.loadingComparableFM = true;
+      await this.$store.dispatch('fetchFeatureModels');
+      this.loadingComparableFM = false;
     },
+    /*async fetchFeatureModelOfFamily(value) {
+  await api
+    .get(`${API_URL}files/uploaded/confirmed/?family=${value}`)
+    .then((response) => {
+      this.files = response.data
+      this.loadingTable = false
+    })
+},*/
+  },
 });
 </script>
 
 <style>
 .pointer-on-hover:hover {
-    cursor: pointer;
+  cursor: pointer;
 }
 </style>

From f74412d89a2d6aae9b6b9c53cc8f12437653dd91 Mon Sep 17 00:00:00 2001
From: lukharsch <lukasharsch@web.de>
Date: Wed, 22 Mar 2023 16:05:22 +0100
Subject: [PATCH 3/8] Updated

---
 backend/core/fileupload/viewsets.py |    3 +
 backend/core/routers.py             |    3 +
 backend/requirements.txt            |    1 -
 frontend/package-lock.json          |  302 +++-
 frontend/src/views/FileDetail.vue   | 2128 ++++++++++++++-------------
 5 files changed, 1373 insertions(+), 1064 deletions(-)

diff --git a/backend/core/fileupload/viewsets.py b/backend/core/fileupload/viewsets.py
index bd992d2f..0b6c32ab 100644
--- a/backend/core/fileupload/viewsets.py
+++ b/backend/core/fileupload/viewsets.py
@@ -386,6 +386,9 @@ def list(self, request, **kwargs):
         familyId = self.request.query_params.get("family")
         if familyId is not None:
             queryset = queryset.filter(family__id=familyId).order_by("version")
+        owner = self.request.query_params.get("owner")
+        if owner is not None:
+            queryset = queryset.filter(owner=owner)
         files = FilesSerializer(queryset, many=True).data
         anonymized_files = []
         for file in files:
diff --git a/backend/core/routers.py b/backend/core/routers.py
index 3f865840..617ce2fc 100644
--- a/backend/core/routers.py
+++ b/backend/core/routers.py
@@ -35,6 +35,9 @@
 # FEATURE MODEL RELATED
 # details file upload https://djangotricks.blogspot.com/2020/03/how-to-upload-a-file-using-django-rest-framework.html
 router.register(r"files", FileUploadViewSet, basename="file-upload")
+""" router.register(
+    r"files/uploaded/confirmed", ConfirmedFileViewSet, basename="confirmed-files"
+) """
 router.register(
     r"files/uploaded/confirmed", ConfirmedFileViewSet, basename="confirmed-files"
 )
diff --git a/backend/requirements.txt b/backend/requirements.txt
index b413b82c..282396d3 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -19,7 +19,6 @@ djangorestframework-simplejwt==5.0.0
 docker==6.0.0
 Faker==14.2.0
 idna==3.3
-psycopg2-binary==2.9.2
 pycparser==2.21
 PyGithub==1.55
 PyJWT==2.3.0
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 085118c8..c78afdfc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3001,25 +3001,65 @@
                 "strip-ansi": "^6.0.0"
             }
         },
-        "node_modules/@vue/compiler-sfc": {
-            "version": "2.7.14",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
-            "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+        "node_modules/@vue/compiler-core": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+            "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
             "dependencies": {
-                "@babel/parser": "^7.18.4",
-                "postcss": "^8.4.14",
+                "@babel/parser": "^7.16.4",
+                "@vue/shared": "3.2.47",
+                "estree-walker": "^2.0.2",
+                "source-map": "^0.6.1"
+            }
+        },
+        "node_modules/@vue/compiler-dom": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+            "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/compiler-core": "3.2.47",
+                "@vue/shared": "3.2.47"
+            }
+        },
+        "node_modules/@vue/compiler-sfc": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+            "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "@babel/parser": "^7.16.4",
+                "@vue/compiler-core": "3.2.47",
+                "@vue/compiler-dom": "3.2.47",
+                "@vue/compiler-ssr": "3.2.47",
+                "@vue/reactivity-transform": "3.2.47",
+                "@vue/shared": "3.2.47",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.25.7",
+                "postcss": "^8.1.10",
                 "source-map": "^0.6.1"
             }
         },
         "node_modules/@vue/compiler-sfc/node_modules/picocolors": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true
         },
         "node_modules/@vue/compiler-sfc/node_modules/postcss": {
             "version": "8.4.19",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
             "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -3030,6 +3070,8 @@
                     "url": "https://tidelift.com/funding/github/npm/postcss"
                 }
             ],
+            "optional": true,
+            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.4",
                 "picocolors": "^1.0.0",
@@ -3039,6 +3081,18 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/@vue/compiler-ssr": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+            "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "@vue/compiler-dom": "3.2.47",
+                "@vue/shared": "3.2.47"
+            }
+        },
         "node_modules/@vue/component-compiler-utils": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -3093,6 +3147,29 @@
                 "webpack": ">=4.0.0"
             }
         },
+        "node_modules/@vue/reactivity-transform": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+            "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "@babel/parser": "^7.16.4",
+                "@vue/compiler-core": "3.2.47",
+                "@vue/shared": "3.2.47",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.25.7"
+            }
+        },
+        "node_modules/@vue/shared": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+            "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
         "node_modules/@vue/web-component-wrapper": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -8230,6 +8307,14 @@
                 "node": ">=4.0"
             }
         },
+        "node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
         "node_modules/esutils": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -11694,6 +11779,17 @@
                 "yallist": "^3.0.2"
             }
         },
+        "node_modules/magic-string": {
+            "version": "0.25.9",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+            "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "dependencies": {
+                "sourcemap-codec": "^1.4.8"
+            }
+        },
         "node_modules/make-dir": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -16817,6 +16913,15 @@
             "deprecated": "See https://github.com/lydell/source-map-url#deprecated",
             "dev": true
         },
+        "node_modules/sourcemap-codec": {
+            "version": "1.4.8",
+            "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+            "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
         "node_modules/spdx-correct": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -18889,6 +18994,44 @@
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
             "dev": true
         },
+        "node_modules/vue/node_modules/@vue/compiler-sfc": {
+            "version": "2.7.14",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+            "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+            "dependencies": {
+                "@babel/parser": "^7.18.4",
+                "postcss": "^8.4.14",
+                "source-map": "^0.6.1"
+            }
+        },
+        "node_modules/vue/node_modules/picocolors": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+            "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+        },
+        "node_modules/vue/node_modules/postcss": {
+            "version": "8.4.21",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+            "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                }
+            ],
+            "dependencies": {
+                "nanoid": "^3.3.4",
+                "picocolors": "^1.0.0",
+                "source-map-js": "^1.0.2"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
         "node_modules/vuetify": {
             "version": "2.6.12",
             "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.12.tgz",
@@ -22720,25 +22863,67 @@
                 "strip-ansi": "^6.0.0"
             }
         },
-        "@vue/compiler-sfc": {
-            "version": "2.7.14",
-            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
-            "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+        "@vue/compiler-core": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+            "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
             "requires": {
-                "@babel/parser": "^7.18.4",
-                "postcss": "^8.4.14",
+                "@babel/parser": "^7.16.4",
+                "@vue/shared": "3.2.47",
+                "estree-walker": "^2.0.2",
+                "source-map": "^0.6.1"
+            }
+        },
+        "@vue/compiler-dom": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+            "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "requires": {
+                "@vue/compiler-core": "3.2.47",
+                "@vue/shared": "3.2.47"
+            }
+        },
+        "@vue/compiler-sfc": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+            "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "requires": {
+                "@babel/parser": "^7.16.4",
+                "@vue/compiler-core": "3.2.47",
+                "@vue/compiler-dom": "3.2.47",
+                "@vue/compiler-ssr": "3.2.47",
+                "@vue/reactivity-transform": "3.2.47",
+                "@vue/shared": "3.2.47",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.25.7",
+                "postcss": "^8.1.10",
                 "source-map": "^0.6.1"
             },
             "dependencies": {
                 "picocolors": {
                     "version": "1.0.0",
                     "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-                    "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+                    "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+                    "dev": true,
+                    "optional": true,
+                    "peer": true
                 },
                 "postcss": {
                     "version": "8.4.19",
                     "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
                     "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+                    "dev": true,
+                    "optional": true,
+                    "peer": true,
                     "requires": {
                         "nanoid": "^3.3.4",
                         "picocolors": "^1.0.0",
@@ -22747,6 +22932,18 @@
                 }
             }
         },
+        "@vue/compiler-ssr": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+            "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "requires": {
+                "@vue/compiler-dom": "3.2.47",
+                "@vue/shared": "3.2.47"
+            }
+        },
         "@vue/component-compiler-utils": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -22795,6 +22992,29 @@
             "dev": true,
             "requires": {}
         },
+        "@vue/reactivity-transform": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+            "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "requires": {
+                "@babel/parser": "^7.16.4",
+                "@vue/compiler-core": "3.2.47",
+                "@vue/shared": "3.2.47",
+                "estree-walker": "^2.0.2",
+                "magic-string": "^0.25.7"
+            }
+        },
+        "@vue/shared": {
+            "version": "3.2.47",
+            "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+            "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
         "@vue/web-component-wrapper": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -26815,6 +27035,14 @@
             "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
             "dev": true
         },
+        "estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
         "esutils": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -29490,6 +29718,17 @@
                 "yallist": "^3.0.2"
             }
         },
+        "magic-string": {
+            "version": "0.25.9",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+            "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+            "dev": true,
+            "optional": true,
+            "peer": true,
+            "requires": {
+                "sourcemap-codec": "^1.4.8"
+            }
+        },
         "make-dir": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -33572,6 +33811,14 @@
             "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
             "dev": true
         },
+        "sourcemap-codec": {
+            "version": "1.4.8",
+            "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+            "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+            "dev": true,
+            "optional": true,
+            "peer": true
+        },
         "spdx-correct": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -34990,6 +35237,33 @@
             "requires": {
                 "@vue/compiler-sfc": "2.7.14",
                 "csstype": "^3.1.0"
+            },
+            "dependencies": {
+                "@vue/compiler-sfc": {
+                    "version": "2.7.14",
+                    "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+                    "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+                    "requires": {
+                        "@babel/parser": "^7.18.4",
+                        "postcss": "^8.4.14",
+                        "source-map": "^0.6.1"
+                    }
+                },
+                "picocolors": {
+                    "version": "1.0.0",
+                    "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+                    "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+                },
+                "postcss": {
+                    "version": "8.4.21",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+                    "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+                    "requires": {
+                        "nanoid": "^3.3.4",
+                        "picocolors": "^1.0.0",
+                        "source-map-js": "^1.0.2"
+                    }
+                }
             }
         },
         "vue-chartjs": {
diff --git a/frontend/src/views/FileDetail.vue b/frontend/src/views/FileDetail.vue
index a212512d..0b9a1eb5 100644
--- a/frontend/src/views/FileDetail.vue
+++ b/frontend/src/views/FileDetail.vue
@@ -1,181 +1,178 @@
 <template>
-  <div class="mainView">
-    <h3 class="text-h3 mb-2 mt-8">
-      Feature Model:
-      <span v-if="loading">
+    <div class="mainView">
+        <h3 class="text-h3 mb-2 mt-8">
+            Feature Model:
+            <span v-if="loading">
                 <v-progress-circular
                     indeterminate
                     v-if="loading"
                 ></v-progress-circular>
             </span>
-      <span v-else>
+            <span v-else>
                 {{ file.label }}
             </span>
-    </h3>
-    <v-row justify="space-between">
-      <v-col cols="12" md="6" id="feature-model-details">
-        <h5 class="text-h5 mb-4">Details and more information</h5>
+        </h3>
+        <v-row justify="space-between">
+            <v-col cols="12" md="6" id="feature-model-details">
+                <h5 class="text-h5 mb-4">Details and more information</h5>
 
-        <v-list two-line>
-          <v-list-item>
-            <v-list-item-icon>
-              <v-icon color="primary"> mdi-information</v-icon>
-            </v-list-item-icon>
+                <v-list two-line>
+                    <v-list-item>
+                        <v-list-item-icon>
+                            <v-icon color="primary"> mdi-information</v-icon>
+                        </v-list-item-icon>
 
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ loading ? '...' : file.label }}
-              </v-list-item-title>
-              <v-list-item-subtitle>Label</v-list-item-subtitle>
-            </v-list-item-content>
+                        <v-list-item-content>
+                            <v-list-item-title>
+                                {{ loading ? '...' : file.label }}
+                            </v-list-item-title>
+                            <v-list-item-subtitle>Label</v-list-item-subtitle>
+                        </v-list-item-content>
 
-            <v-list-item-action>
-              <v-btn icon>
-                <v-icon>mdi-pencil</v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </v-list-item>
+                        <v-list-item-action>
+                            <v-btn icon>
+                                <v-icon>mdi-pencil</v-icon>
+                            </v-btn>
+                        </v-list-item-action>
+                    </v-list-item>
 
-          <v-list-item>
-            <v-list-item-icon></v-list-item-icon>
+                    <v-list-item>
+                        <v-list-item-icon></v-list-item-icon>
 
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ loading ? '...' : file.description }}
-              </v-list-item-title>
-              <v-list-item-subtitle
-              >Description
-              </v-list-item-subtitle
-              >
-            </v-list-item-content>
+                        <v-list-item-content>
+                            <v-list-item-title>
+                                {{ loading ? '...' : file.description }}
+                            </v-list-item-title>
+                            <v-list-item-subtitle
+                                >Description
+                            </v-list-item-subtitle>
+                        </v-list-item-content>
 
-            <v-list-item-action>
-              <v-btn icon>
-                <v-icon>mdi-pencil</v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </v-list-item>
+                        <v-list-item-action>
+                            <v-btn icon>
+                                <v-icon>mdi-pencil</v-icon>
+                            </v-btn>
+                        </v-list-item-action>
+                    </v-list-item>
 
-          <v-divider inset></v-divider>
+                    <v-divider inset></v-divider>
 
-          <v-list-item>
-            <v-list-item-icon>
-              <v-icon color="primary"> mdi-license</v-icon>
-            </v-list-item-icon>
+                    <v-list-item>
+                        <v-list-item-icon>
+                            <v-icon color="primary"> mdi-license</v-icon>
+                        </v-list-item-icon>
 
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ loading ? '...' : file.license.label }}
-              </v-list-item-title>
-              <v-list-item-subtitle>License</v-list-item-subtitle>
-            </v-list-item-content>
+                        <v-list-item-content>
+                            <v-list-item-title>
+                                {{ loading ? '...' : file.license.label }}
+                            </v-list-item-title>
+                            <v-list-item-subtitle>License</v-list-item-subtitle>
+                        </v-list-item-content>
 
-            <!--						<v-list-item-action>
+                        <!--						<v-list-item-action>
   <v-btn icon>
     <v-icon>mdi-pencil</v-icon>
   </v-btn>
 </v-list-item-action>-->
-          </v-list-item>
+                    </v-list-item>
 
-          <v-divider inset></v-divider>
+                    <v-divider inset></v-divider>
 
-          <v-list-item>
-            <v-list-item-icon>
-              <v-icon color="primary"> mdi-tag</v-icon>
-            </v-list-item-icon>
+                    <v-list-item>
+                        <v-list-item-icon>
+                            <v-icon color="primary"> mdi-tag</v-icon>
+                        </v-list-item-icon>
 
-            <v-list-item-content>
-              <v-list-item-title>
-                <v-chip
-                    class="mr-2"
-                    v-for="tag in file.tags"
-                    :key="tag.id"
-                >
-                  {{ tag.label }}
-                </v-chip>
-              </v-list-item-title>
-              <v-list-item-subtitle>Tags</v-list-item-subtitle>
-            </v-list-item-content>
+                        <v-list-item-content>
+                            <v-list-item-title>
+                                <v-chip
+                                    class="mr-2"
+                                    v-for="tag in file.tags"
+                                    :key="tag.id"
+                                >
+                                    {{ tag.label }}
+                                </v-chip>
+                            </v-list-item-title>
+                            <v-list-item-subtitle>Tags</v-list-item-subtitle>
+                        </v-list-item-content>
 
-            <v-list-item-action>
-              <v-btn icon>
-                <v-icon>mdi-pencil</v-icon>
-              </v-btn>
-            </v-list-item-action>
-          </v-list-item>
-          <v-divider inset></v-divider>
-          <v-list-item>
-            <v-list-item-icon>
-              <v-icon color="primary"> mdi-calendar</v-icon>
-            </v-list-item-icon>
+                        <v-list-item-action>
+                            <v-btn icon>
+                                <v-icon>mdi-pencil</v-icon>
+                            </v-btn>
+                        </v-list-item-action>
+                    </v-list-item>
+                    <v-divider inset></v-divider>
+                    <v-list-item>
+                        <v-list-item-icon>
+                            <v-icon color="primary"> mdi-calendar</v-icon>
+                        </v-list-item-icon>
 
-            <v-list-item-content>
-              <v-list-item-title>
-                {{
-                  new Date(file.uploaded_at).toLocaleString(
-                      'en-US'
-                  )
-                }}
-              </v-list-item-title>
-              <v-list-item-subtitle
-              >Uploaded on
-              </v-list-item-subtitle
-              >
-            </v-list-item-content>
+                        <v-list-item-content>
+                            <v-list-item-title>
+                                {{
+                                    new Date(file.uploaded_at).toLocaleString(
+                                        'en-US'
+                                    )
+                                }}
+                            </v-list-item-title>
+                            <v-list-item-subtitle
+                                >Uploaded on
+                            </v-list-item-subtitle>
+                        </v-list-item-content>
 
-            <!--						<v-list-item-action>
+                        <!--						<v-list-item-action>
   <v-btn icon>
     <v-icon>mdi-pencil</v-icon>
   </v-btn>
 </v-list-item-action>-->
-          </v-list-item>
-          <v-divider inset></v-divider>
-          <v-list-item>
-            <v-list-item-icon>
-              <v-icon color="primary">
-                mdi-human-male-female-child
-              </v-icon>
-            </v-list-item-icon>
+                    </v-list-item>
+                    <v-divider inset></v-divider>
+                    <v-list-item>
+                        <v-list-item-icon>
+                            <v-icon color="primary">
+                                mdi-human-male-female-child
+                            </v-icon>
+                        </v-list-item-icon>
 
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ loading ? '...' : file.family.label }} ({{
-                  loading ? '...' : file.version
-                }})
-              </v-list-item-title>
-              <v-list-item-subtitle
-              >Family and version
-              </v-list-item-subtitle
-              >
-            </v-list-item-content>
+                        <v-list-item-content>
+                            <v-list-item-title>
+                                {{ loading ? '...' : file.family.label }} ({{
+                                    loading ? '...' : file.version
+                                }})
+                            </v-list-item-title>
+                            <v-list-item-subtitle
+                                >Family and version
+                            </v-list-item-subtitle>
+                        </v-list-item-content>
 
-            <!--						<v-list-item-action>
+                        <!--						<v-list-item-action>
   <v-btn icon>
     <v-icon>mdi-pencil</v-icon>
   </v-btn>
 </v-list-item-action>-->
-          </v-list-item>
-        </v-list>
-        <div
-            class="mt-3 d-flex justify-space-between align-center"
-            id="feature-model-actions"
-        >
-          <div>
-            <div class="d-inline-block mr-2">
-              <v-btn
-                  color="primary"
-                  outlined
-                  :to="'/feature-model/' + file.id"
-              >
-                <v-icon dark left>mdi-eye</v-icon>
-                View Model
-              </v-btn>
-            </div>
-            <div class="d-inline-block">
-              <v-btn
-                  outlined
-                  color="primary"
-                  @click="
+                    </v-list-item>
+                </v-list>
+                <div
+                    class="mt-3 d-flex justify-space-between align-center"
+                    id="feature-model-actions"
+                >
+                    <div>
+                        <div class="d-inline-block mr-2">
+                            <v-btn
+                                color="primary"
+                                outlined
+                                :to="'/feature-model/' + file.id"
+                            >
+                                <v-icon dark left>mdi-eye</v-icon>
+                                View Model
+                            </v-btn>
+                        </div>
+                        <div class="d-inline-block">
+                            <v-btn
+                                outlined
+                                color="primary"
+                                @click="
                                     $router.push({
                                         name: 'FamilyDetail',
                                         params: {
@@ -184,365 +181,398 @@
                                         },
                                     })
                                 "
-              >
-                <v-icon dark left>
-                  mdi-human-male-female-child
-                </v-icon>
-                See Family
-              </v-btn>
-            </div>
-          </div>
-          <div class="d-inline-block">
-            <v-btn
-                outlined
-                color="error"
-                :disabled="file.owner === false"
-                @click="deleteItem(item)"
-            >
-              Delete Model
-            </v-btn>
-          </div>
-        </div>
-      </v-col>
-      <v-col cols="12" md="6">
-        <div id="feature-model-artifacts">
-          <h5 class="text-h5 mb-4">Artifacts (tbd)</h5>
-          <div class="my-3">
-            <v-list rounded>
-              <v-subheader>REPORTS</v-subheader>
-              <v-list-item
-                  v-for="(item, i) in artifacts"
-                  :key="i"
-              >
-                <v-list-item-avatar>
-                  <v-icon> mdi-file-document-outline</v-icon>
-                </v-list-item-avatar>
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{ item.title }}
-                  </v-list-item-title>
-                  <v-list-item-subtitle>
-                    {{ item.subtitle }}
-                  </v-list-item-subtitle>
-                </v-list-item-content>
-                <v-list-item-action>
-                  <v-btn
-                      icon
-                      @click.stop="showArtifactDialog(item)"
-                  >
-                    <v-icon> mdi-eye</v-icon>
-                  </v-btn>
-                </v-list-item-action>
-              </v-list-item>
-            </v-list>
-          </div>
-        </div>
-        <div class="my-3" id="feature-model-analysis-progress">
-          <div
-              class="d-flex justify-center flex-column align-center my-3"
-          >
-            <span>Analyses Progress:</span>
-            <div class="pa-0" style="width: 100%">
-              <div
-                  :style="`width: ${getStati.success.percentage}%!important`"
-                  class="d-inline-block"
-              >
-                <v-tooltip bottom>
-                  <template v-slot:activator="{ on, attrs }">
-                    <v-progress-linear
-                        height="15"
-                        value="100"
-                        color="green"
-                        v-bind="attrs"
-                        v-on="on"
-                    />
-                  </template>
-                  <span>
+                            >
+                                <v-icon dark left>
+                                    mdi-human-male-female-child
+                                </v-icon>
+                                See Family
+                            </v-btn>
+                        </div>
+                    </div>
+                    <div class="d-inline-block">
+                        <v-btn
+                            outlined
+                            color="error"
+                            :disabled="file.owner === false"
+                            @click="deleteItem(item)"
+                        >
+                            Delete Model
+                        </v-btn>
+                    </div>
+                </div>
+            </v-col>
+            <v-col cols="12" md="6">
+                <div id="feature-model-artifacts">
+                    <h5 class="text-h5 mb-4">Artifacts (tbd)</h5>
+                    <div class="my-3">
+                        <v-list rounded>
+                            <v-subheader>REPORTS</v-subheader>
+                            <v-list-item
+                                v-for="(item, i) in artifacts"
+                                :key="i"
+                            >
+                                <v-list-item-avatar>
+                                    <v-icon> mdi-file-document-outline</v-icon>
+                                </v-list-item-avatar>
+                                <v-list-item-content>
+                                    <v-list-item-title>
+                                        {{ item.title }}
+                                    </v-list-item-title>
+                                    <v-list-item-subtitle>
+                                        {{ item.subtitle }}
+                                    </v-list-item-subtitle>
+                                </v-list-item-content>
+                                <v-list-item-action style="flex-direction: row">
+                                    <v-btn icon>
+                                        <v-icon> mdi-download</v-icon>
+                                    </v-btn>
+                                    <v-btn
+                                        icon
+                                        @click.stop="showArtifactDialog(item)"
+                                    >
+                                        <v-icon> mdi-eye</v-icon>
+                                    </v-btn>
+                                </v-list-item-action>
+                            </v-list-item>
+                        </v-list>
+                    </div>
+                </div>
+                <div class="my-3" id="feature-model-analysis-progress">
+                    <div
+                        class="d-flex justify-center flex-column align-center my-3"
+                    >
+                        <span>Analyses Progress:</span>
+                        <div class="pa-0" style="width: 100%">
+                            <div
+                                :style="`width: ${getStati.success.percentage}%!important`"
+                                class="d-inline-block"
+                            >
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <v-progress-linear
+                                            height="15"
+                                            value="100"
+                                            color="green"
+                                            v-bind="attrs"
+                                            v-on="on"
+                                        />
+                                    </template>
+                                    <span>
                                         Success:
                                         {{ getStati.success.absolute }} /
                                         {{ getStati.amount }}
                                     </span>
-                </v-tooltip>
-              </div>
-              <div
-                  :style="`width: ${getStati.error.percentage}%!important`"
-                  class="d-inline-block"
-              >
-                <v-tooltip bottom>
-                  <template v-slot:activator="{ on, attrs }">
-                    <v-progress-linear
-                        height="15"
-                        value="100"
-                        color="error"
-                        v-bind="attrs"
-                        v-on="on"
-                    />
-                  </template>
-                  <span>
+                                </v-tooltip>
+                            </div>
+                            <div
+                                :style="`width: ${getStati.error.percentage}%!important`"
+                                class="d-inline-block"
+                            >
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <v-progress-linear
+                                            height="15"
+                                            value="100"
+                                            color="error"
+                                            v-bind="attrs"
+                                            v-on="on"
+                                        />
+                                    </template>
+                                    <span>
                                         Error:
                                         {{ getStati.error.absolute }} /
                                         {{ getStati.amount }}
                                     </span>
-                </v-tooltip>
-              </div>
-              <div
-                  :style="`width: ${getStati.progress.percentage}%!important`"
-                  class="d-inline-block"
-              >
-                <v-tooltip bottom>
-                  <template v-slot:activator="{ on, attrs }">
-                    <v-progress-linear
-                        height="15"
-                        value="100"
-                        color="primary"
-                        v-bind="attrs"
-                        v-on="on"
-                    />
-                  </template>
-                  <span>
+                                </v-tooltip>
+                            </div>
+                            <div
+                                :style="`width: ${getStati.progress.percentage}%!important`"
+                                class="d-inline-block"
+                            >
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on, attrs }">
+                                        <v-progress-linear
+                                            height="15"
+                                            value="100"
+                                            color="primary"
+                                            v-bind="attrs"
+                                            v-on="on"
+                                        />
+                                    </template>
+                                    <span>
                                         In progress:
                                         {{ getStati.progress.absolute }} /
                                         {{ getStati.amount }}
                                     </span>
-                </v-tooltip>
-              </div>
-            </div>
-          </div>
-          <v-data-table
-              :headers="headersAnalysis"
-              :items="itemsAnalysis"
-              :loading="loading"
-              :search="searchAnalysis"
-              class="elevation-1"
-          >
-            <template v-slot:top>
-              <v-toolbar flat>
-                <v-toolbar-title class="hidden-sm-and-down"
-                >Analyses
-                </v-toolbar-title
-                >
-                <v-divider
-                    class="mx-4 hidden-sm-and-down"
-                    inset
-                    vertical
-                ></v-divider>
-                <v-spacer class="hidden-sm-and-down"></v-spacer>
-                <v-text-field
-                    v-model="searchAnalysis"
-                    append-icon="mdi-magnify"
-                    hide-details
-                    label="Search"
-                    single-line
-                >
-                </v-text-field>
-              </v-toolbar>
-            </template>
-            <template v-slot:item.status="{ item }">
-              <v-progress-circular
-                  v-if="item.status === 0"
-                  size="24"
-                  width="3"
-                  indeterminate
-                  color="primary"
-              ></v-progress-circular>
-              <v-icon
-                  v-else-if="item.status === 1"
-                  color="success"
-              >
-                mdi-check
-              </v-icon>
-              <v-icon v-else color="error"> mdi-cancel</v-icon>
-            </template>
-            <template v-slot:item.id="{ index }">
-              {{ index + 1 }}
-            </template>
-          </v-data-table>
-        </div>
-      </v-col>
-    </v-row>
-    <v-dialog v-model="dialogDelete" max-width="400px">
-      <v-card>
-        <v-card-title class="text-h5" style="word-break: break-word">
-          Are you sure you want to delete this feature model?
-        </v-card-title>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="primary" text @click="closeDelete"
-          >Cancel
-          </v-btn>
-          <v-spacer></v-spacer>
-          <v-btn
-              :loading="removeLoading"
-              color="primary"
-              text
-              @click="deleteItemConfirm"
-          >
-            Delete
-          </v-btn>
-          <v-spacer></v-spacer>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-    <v-dialog v-model="dialogArtifact" fullscreen transition="dialog-bottom-transition">
-      <v-toolbar
-          dark
-      >
-        <v-icon class="mr-2">mdi-file-compare</v-icon>
-        <v-toolbar-title>View and compare Feature Model artifacts: <span
-            class="font-weight-bold">{{ selectedArtifact.title }}</span></v-toolbar-title>
-        <v-spacer></v-spacer>
-        <v-toolbar-items>
-          <v-btn
-              icon
-              dark
-              @click="dialogArtifact = false"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </v-toolbar-items>
-      </v-toolbar>
-      <v-card>
-        <v-card-text>
-          <v-row class="ma-1">
-            <v-col
-                cols="12"
-                :md="isRightFmSelected ? 6 : 8"
-                :lg="isRightFmSelected ? 6 : 9"
-                class="pa-2"
-            >
-              <h6 class="text-h6">Feature Model: {{ file.label }}</h6>
-
-              <v-data-table
-                  v-if="selectedArtifact.title === 'CSV'"
-                  :headers="headerCsvArtifact"
-                  :items="itemsCsvArtifact"
-                  :items-per-page="10"
-              ></v-data-table>
-              <div v-else>
-                <textarea v-model="xmlFile" style="border:none; width: 100%; height: 500px; color: white">
-                </textarea>
-              </div>
-            </v-col>
-            <v-col
-                v-if="!isRightFmSelected"
-                cols="12"
-                md="4"
-                lg="3"
-                class="pa-2"
-                style="border: 2px dashed grey"
-            >
-              <v-sheet
-                  v-if="!shouldCompare"
-                  height="300px"
-                  min-height="190px"
-                  width="100%"
-                  class="d-flex justify-center align-center pointer-on-hover"
-                  @click="compare"
-              >
-                <div class="text-h6 text-info text-center">
-                  Click to compare with another feature model
-                </div>
-              </v-sheet>
-              <div v-else>
-                <v-btn
-                    icon
-                    @click="shouldCompare = false"
-                    class="mr-2"
-                >
-                  <v-icon>mdi-arrow-left</v-icon>
-                </v-btn>
-                <span class="text-subtitle-1"
-                >My Feature Models</span
-                >
-                <v-progress-circular
-                    style="display: block"
-                    indeterminate
-                    color="primary"
-                    v-if="loadingComparableFM"
-                ></v-progress-circular>
-                <v-list
-                    rounded
-                    v-else
-                    height="300px"
-                    style="overflow-y: auto"
-                >
-                  <v-list-item-group
-                      v-model="selectedRightFM"
-                      color="primary"
-                  >
-                    <v-list-item
-                        v-for="(item, i) in getMyFM"
-                        :key="i"
+                                </v-tooltip>
+                            </div>
+                        </div>
+                    </div>
+                    <v-data-table
+                        :headers="headersAnalysis"
+                        :items="itemsAnalysis"
+                        :loading="loading"
+                        :search="searchAnalysis"
+                        class="elevation-1"
                     >
-                      <v-list-item-avatar>
-                        <v-icon>
-                          mdi-family-tree
-                        </v-icon>
-                      </v-list-item-avatar>
-                      <v-list-item-content>
-                        <v-list-item-title>
-                          {{ item.label }}
-                        </v-list-item-title>
-                        <v-list-item-subtitle>
-                          {{
-                            new Date(
-                                item.uploaded_at
-                            ).toLocaleString(
-                                'en-US'
-                            )
-                          }}
-                        </v-list-item-subtitle>
-                      </v-list-item-content>
-                    </v-list-item>
-                  </v-list-item-group>
-                </v-list>
-              </div>
+                        <template v-slot:top>
+                            <v-toolbar flat>
+                                <v-toolbar-title class="hidden-sm-and-down"
+                                    >Analyses
+                                </v-toolbar-title>
+                                <v-divider
+                                    class="mx-4 hidden-sm-and-down"
+                                    inset
+                                    vertical
+                                ></v-divider>
+                                <v-spacer class="hidden-sm-and-down"></v-spacer>
+                                <v-text-field
+                                    v-model="searchAnalysis"
+                                    append-icon="mdi-magnify"
+                                    hide-details
+                                    label="Search"
+                                    single-line
+                                >
+                                </v-text-field>
+                            </v-toolbar>
+                        </template>
+                        <template v-slot:item.status="{ item }">
+                            <v-progress-circular
+                                v-if="item.status === 0"
+                                size="24"
+                                width="3"
+                                indeterminate
+                                color="primary"
+                            ></v-progress-circular>
+                            <v-icon
+                                v-else-if="item.status === 1"
+                                color="success"
+                            >
+                                mdi-check
+                            </v-icon>
+                            <v-icon v-else color="error"> mdi-cancel</v-icon>
+                        </template>
+                        <template v-slot:item.id="{ index }">
+                            {{ index + 1 }}
+                        </template>
+                    </v-data-table>
+                </div>
             </v-col>
-            <v-col v-else cols="12" md="6" lg="6" class="pa-2" style="border-left: 2px solid white;">
-              <h6 class="text-h6">
-                <v-btn
-                    color="inherit"
-                    icon
-                    @click="selectedRightFM = -1"
-                    class="mr-2"
+        </v-row>
+        <v-dialog v-model="dialogDelete" max-width="400px">
+            <v-card>
+                <v-card-title class="text-h5" style="word-break: break-word">
+                    Are you sure you want to delete this feature model?
+                </v-card-title>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="primary" text @click="closeDelete"
+                        >Cancel
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        :loading="removeLoading"
+                        color="primary"
+                        text
+                        @click="deleteItemConfirm"
+                    >
+                        Delete
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+        <v-dialog
+            v-model="dialogArtifact"
+            fullscreen
+            transition="dialog-bottom-transition"
+        >
+            <v-toolbar dark>
+                <v-icon class="mr-2">mdi-file-compare</v-icon>
+                <v-toolbar-title
+                    >View and compare Feature Model artifacts:
+                    <span class="font-weight-bold">{{
+                        selectedArtifact.title
+                    }}</span></v-toolbar-title
                 >
-                  <v-icon>mdi-arrow-left</v-icon>
-                </v-btn>
-                {{ getMyFM[selectedRightFM].label }}
-              </h6>
-              <v-data-table
-                  v-if="selectedArtifact.title === 'CSV'"
-                  :headers="headerCsvArtifact"
-                  :items="itemsCsvArtifact"
-                  :items-per-page="10"
-              ></v-data-table>
-              <div v-else>
-                <textarea v-model="xmlFile" style="border:none; width: 100%; height: 500px; color: white">
-                </textarea>
-              </div>
-            </v-col>
-          </v-row>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-    <tutorial-mode
-        :show="showTutorial"
-        @close="showTutorial = false"
-        :next-steps="tutorialSteps"
-        local-storage-identifier="fileDetailTutorialCompleted"
-    ></tutorial-mode>
-    <v-btn
-        id="tutorial-mode"
-        fab
-        fixed
-        right
-        bottom
-        color="primary"
-        @click="showTutorial = true"
-    >
-      <v-icon> mdi-school</v-icon>
-    </v-btn>
-  </div>
+                <v-spacer></v-spacer>
+                <v-toolbar-items>
+                    <v-btn icon dark @click="dialogArtifact = false">
+                        <v-icon>mdi-close</v-icon>
+                    </v-btn>
+                </v-toolbar-items>
+            </v-toolbar>
+            <v-card>
+                <v-card-text>
+                    <v-row class="ma-1">
+                        <v-col
+                            cols="12"
+                            :md="isRightFmSelected ? 6 : 8"
+                            :lg="isRightFmSelected ? 6 : 9"
+                            class="pa-2"
+                        >
+                            <h6 class="text-h6">
+                                Feature Model: {{ file.label }}
+                            </h6>
+
+                            <v-data-table
+                                v-if="selectedArtifact.title === 'CSV'"
+                                :headers="headerCsvArtifact"
+                                :items="itemsCsvArtifact"
+                                :items-per-page="10"
+                            ></v-data-table>
+                            <div v-else>
+                                <textarea
+                                    v-model="xmlFile"
+                                    style="
+                                        border: none;
+                                        width: 100%;
+                                        height: 500px;
+                                        color: white;
+                                    "
+                                >
+                                </textarea>
+                            </div>
+                            <v-btn color="success">
+                                <v-icon left>mdi-download</v-icon>
+                                Download Artifact
+                            </v-btn>
+                        </v-col>
+                        <v-col
+                            v-if="!isRightFmSelected"
+                            cols="12"
+                            md="4"
+                            lg="3"
+                            class="pa-2"
+                            style="border: 2px dashed grey"
+                        >
+                            <v-sheet
+                                v-if="!shouldCompare"
+                                height="300px"
+                                min-height="190px"
+                                width="100%"
+                                class="d-flex justify-center align-center pointer-on-hover"
+                                @click="compare"
+                            >
+                                <div class="text-h6 text-info text-center">
+                                    Click to compare with another feature model
+                                </div>
+                            </v-sheet>
+                            <div v-else>
+                                <v-btn
+                                    icon
+                                    @click="shouldCompare = false"
+                                    class="mr-2"
+                                >
+                                    <v-icon>mdi-arrow-left</v-icon>
+                                </v-btn>
+                                <span class="text-subtitle-1"
+                                    >My Feature Models</span
+                                >
+                                <v-progress-circular
+                                    style="display: block"
+                                    indeterminate
+                                    color="primary"
+                                    v-if="loadingComparableFM"
+                                ></v-progress-circular>
+                                <v-list
+                                    rounded
+                                    v-else
+                                    height="300px"
+                                    style="overflow-y: auto"
+                                >
+                                    <v-list-item-group
+                                        v-model="selectedRightFM"
+                                        color="primary"
+                                    >
+                                        <v-list-item
+                                            v-for="(item, i) in getMyFM"
+                                            :key="i"
+                                        >
+                                            <v-list-item-avatar>
+                                                <v-icon>
+                                                    mdi-family-tree
+                                                </v-icon>
+                                            </v-list-item-avatar>
+                                            <v-list-item-content>
+                                                <v-list-item-title>
+                                                    {{ item.label }}
+                                                </v-list-item-title>
+                                                <v-list-item-subtitle>
+                                                    {{
+                                                        new Date(
+                                                            item.uploaded_at
+                                                        ).toLocaleString(
+                                                            'en-US'
+                                                        )
+                                                    }}
+                                                </v-list-item-subtitle>
+                                            </v-list-item-content>
+                                        </v-list-item>
+                                    </v-list-item-group>
+                                </v-list>
+                            </div>
+                        </v-col>
+                        <v-col
+                            v-else
+                            cols="12"
+                            md="6"
+                            lg="6"
+                            class="pa-2"
+                            style="border-left: 2px solid white"
+                        >
+                            <h6 class="text-h6">
+                                <v-btn
+                                    color="inherit"
+                                    icon
+                                    @click="selectedRightFM = -1"
+                                    class="mr-2"
+                                >
+                                    <v-icon>mdi-arrow-left</v-icon>
+                                </v-btn>
+                                {{ getMyFM[selectedRightFM].label }}
+                            </h6>
+                            <v-data-table
+                                v-if="selectedArtifact.title === 'CSV'"
+                                :headers="headerCsvArtifact"
+                                :items="itemsCsvArtifact"
+                                :items-per-page="10"
+                            ></v-data-table>
+                            <div v-else>
+                                <textarea
+                                    v-model="xmlFile"
+                                    style="
+                                        border: none;
+                                        width: 100%;
+                                        height: 500px;
+                                        color: white;
+                                    "
+                                >
+                                </textarea>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
+        <tutorial-mode
+            :show="showTutorial"
+            @close="showTutorial = false"
+            :next-steps="tutorialSteps"
+            local-storage-identifier="fileDetailTutorialCompleted"
+        ></tutorial-mode>
+        <v-btn
+            id="tutorial-mode"
+            fab
+            fixed
+            right
+            bottom
+            color="primary"
+            @click="showTutorial = true"
+        >
+            <v-icon> mdi-school</v-icon>
+        </v-btn>
+    </div>
 </template>
 
 <script>
@@ -553,479 +583,479 @@ import TutorialMode from '@/components/TutorialMode';
 const API_URL = process.env.VUE_APP_DOMAIN;
 
 export default Vue.extend({
-  name: 'FileDetail',
+    name: 'FileDetail',
 
-  components: {
-    TutorialMode,
-  },
+    components: {
+        TutorialMode,
+    },
 
-  props: {},
+    props: {},
 
-  data: () => ({
-    file: {},
-    loading: true,
-    dialogDelete: false,
-    dialogArtifact: false,
-    shouldCompare: false,
-    loadingComparableFM: false,
-    selectedRightFM: -1,
-    selectedArtifact: {},
-    rightFmIsSelected: false,
-    removeLoading: false,
-    searchAnalysis: '',
-    headersAnalysis: [
-      {
-        text: 'ID',
-        align: 'start',
-        sortable: false,
-        value: 'id',
-      },
-      {text: 'Name', value: 'name'},
-      {text: 'Query', value: 'query'},
-      {text: 'Status', value: 'status'},
-    ],
-    itemsAnalysis: [
-      {
-        id: 1,
-        name: 'first analysis',
-        query: 'count nodes',
-        status: 0,
-      },
-      {
-        id: 2,
-        name: 'complex analysis',
-        query: 'calculate purpose of life --force',
-        status: 1,
-      },
-      {
-        id: 42,
-        name: 'another analysis',
-        query: 'foo bar',
-        status: 0,
-      },
-    ],
-    showTutorial: false,
-    tutorialSteps: [
-      {
-        title: 'Welcome to the tutorial!',
-        description:
-            'You can restart the tutorial anytime by clicking on this button.',
-        elementCssSelector: '#tutorial-mode',
-      },
-      {
-        title: 'Feature model details',
-        description:
-            'Here you can see details and more information about the feature model. You can also view the model and the family. If you are the owner of the model, you can also edit aspects like name or description.',
-        elementCssSelector: '#feature-model-details',
-      },
-      {
-        title: 'Feature model actions',
-        description:
-            'With those action buttons, you are able to view the model or the family, or - if you are the owner of the model - delete it.',
-        elementCssSelector: '#feature-model-actions',
-      },
-      {
-        title: 'The Analyses and progress',
-        description:
-            "After uploading a feature model, some predefined analyses will run on them automatically. In this table you'll see those analyses as well as the progress (done, in progress, failed).",
-        elementCssSelector: '#feature-model-analysis-progress',
-      },
-      {
-        title: 'Feature model artifacts',
-        description:
-            "In this section you'll find artifacts of the feature model. Those artifacts - which are basically files - are automatically generated after the analyses are done. You can view them here.",
-        elementCssSelector: '#feature-model-artifacts',
-      },
-    ],
-    artifacts: [
-      {
-        title: 'CSV',
-        subtitle: 'Displaying CSV of feature model',
-      },
-      {
-        title: 'XML',
-        subtitle: 'Displaying XML of feature model',
-      },
-      {
-        title: 'Complex Document',
-        subtitle: 'Generated from analysis: complex analysis',
-      },
-    ],
-    headerCsvArtifact: [
-      {text: 'Input File', value: 'input_file'},
-      {text: 'Input Hash', value: 'input_hash'},
-      {text: 'SVO', value: 'svo'},
-      {text: 'DVO', value: 'dvo'},
-      {text: 'DVO Time', value: 'dvo_time'},
-      {text: 'BDD Compiler', value: 'bdd_compiler'},
-      {text: 'BDD Bootstrap', value: 'bdd_bootstrap'},
-      {text: 'BDD Compile', value: 'bdd_compile'},
-      {text: 'BDD Timeout', value: 'bdd_timeout'},
-      {text: 'BDD Size', value: 'bdd_size'},
-    ],
-    itemsCsvArtifact: [
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.006,
-        "bdd_compile": 44.813,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "",
-        "dvo_time": "",
-        "bdd_compiler": "",
-        "bdd_bootstrap": null,
-        "bdd_compile": null,
-        "bdd_timeout": null,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.008,
-        "bdd_compile": 45.037,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "",
-        "dvo_time": "",
-        "bdd_compiler": "",
-        "bdd_bootstrap": null,
-        "bdd_compile": null,
-        "bdd_timeout": null,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.01,
-        "bdd_compile": 32.266,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.006,
-        "bdd_compile": 31.951,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "",
-        "dvo_time": "",
-        "bdd_compiler": "",
-        "bdd_bootstrap": null,
-        "bdd_compile": null,
-        "bdd_timeout": null,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.006,
-        "bdd_compile": 37.242,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "",
-        "dvo_time": "",
-        "bdd_compiler": "",
-        "bdd_bootstrap": null,
-        "bdd_compile": null,
-        "bdd_timeout": null,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force",
-        "dvo": "",
-        "dvo_time": "",
-        "bdd_compiler": "",
-        "bdd_bootstrap": null,
-        "bdd_compile": null,
-        "bdd_timeout": null,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.006,
-        "bdd_compile": 36.179,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.01,
-        "bdd_compile": 34.675,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.009,
-        "bdd_compile": 46.592,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "",
-        "dvo_time": "",
-        "bdd_compiler": "",
-        "bdd_bootstrap": null,
-        "bdd_compile": null,
-        "bdd_timeout": null,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.007,
-        "bdd_compile": 40.298,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.005,
-        "bdd_compile": 44.059,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.006,
-        "bdd_compile": 36.9,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.006,
-        "bdd_compile": 41.094,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.008,
-        "bdd_compile": 35.726,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-best",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.01,
-        "bdd_compile": 27.533,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.01,
-        "bdd_compile": 32.349,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.01,
-        "bdd_compile": 41.088,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.005,
-        "bdd_compile": 34.342,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "",
-        "dvo_time": "",
-        "bdd_compiler": "",
-        "bdd_bootstrap": null,
-        "bdd_compile": null,
-        "bdd_timeout": null,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.01,
-        "bdd_compile": 30.061,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.009,
-        "bdd_compile": 35.78,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.011,
-        "bdd_compile": 36.598,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.009,
-        "bdd_compile": 36.843,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "SIFTC",
-        "dvo_time": "",
-        "bdd_compiler": "cudd",
-        "bdd_bootstrap": 0.01,
-        "bdd_compile": 31.673,
-        "bdd_timeout": false,
-        "bdd_size": ""
-      },
-      {
-        "input_file": "busybox.dimacs",
-        "input_hash": "287b501faf4c816afd0fe517c85ab7ed",
-        "svo": "force-avg",
-        "dvo": "",
-        "dvo_time": "",
-        "bdd_compiler": "",
-        "bdd_bootstrap": null,
-        "bdd_compile": null,
-        "bdd_timeout": null,
-        "bdd_size": ""
-      }
-    ],
-    xmlFile: `
+    data: () => ({
+        file: {},
+        loading: true,
+        dialogDelete: false,
+        dialogArtifact: false,
+        shouldCompare: false,
+        loadingComparableFM: false,
+        selectedRightFM: -1,
+        selectedArtifact: {},
+        rightFmIsSelected: false,
+        removeLoading: false,
+        searchAnalysis: '',
+        headersAnalysis: [
+            {
+                text: 'ID',
+                align: 'start',
+                sortable: false,
+                value: 'id',
+            },
+            { text: 'Name', value: 'name' },
+            { text: 'Query', value: 'query' },
+            { text: 'Status', value: 'status' },
+        ],
+        itemsAnalysis: [
+            {
+                id: 1,
+                name: 'first analysis',
+                query: 'count nodes',
+                status: 0,
+            },
+            {
+                id: 2,
+                name: 'complex analysis',
+                query: 'calculate purpose of life --force',
+                status: 1,
+            },
+            {
+                id: 42,
+                name: 'another analysis',
+                query: 'foo bar',
+                status: 0,
+            },
+        ],
+        showTutorial: false,
+        tutorialSteps: [
+            {
+                title: 'Welcome to the tutorial!',
+                description:
+                    'You can restart the tutorial anytime by clicking on this button.',
+                elementCssSelector: '#tutorial-mode',
+            },
+            {
+                title: 'Feature model details',
+                description:
+                    'Here you can see details and more information about the feature model. You can also view the model and the family. If you are the owner of the model, you can also edit aspects like name or description.',
+                elementCssSelector: '#feature-model-details',
+            },
+            {
+                title: 'Feature model actions',
+                description:
+                    'With those action buttons, you are able to view the model or the family, or - if you are the owner of the model - delete it.',
+                elementCssSelector: '#feature-model-actions',
+            },
+            {
+                title: 'The Analyses and progress',
+                description:
+                    "After uploading a feature model, some predefined analyses will run on them automatically. In this table you'll see those analyses as well as the progress (done, in progress, failed).",
+                elementCssSelector: '#feature-model-analysis-progress',
+            },
+            {
+                title: 'Feature model artifacts',
+                description:
+                    "In this section you'll find artifacts of the feature model. Those artifacts - which are basically files - are automatically generated after the analyses are done. You can view them here.",
+                elementCssSelector: '#feature-model-artifacts',
+            },
+        ],
+        artifacts: [
+            {
+                title: 'CSV',
+                subtitle: 'Displaying CSV of feature model',
+            },
+            {
+                title: 'XML',
+                subtitle: 'Displaying XML of feature model',
+            },
+            {
+                title: 'Complex Document',
+                subtitle: 'Generated from analysis: complex analysis',
+            },
+        ],
+        headerCsvArtifact: [
+            { text: 'Input File', value: 'input_file' },
+            { text: 'Input Hash', value: 'input_hash' },
+            { text: 'SVO', value: 'svo' },
+            { text: 'DVO', value: 'dvo' },
+            { text: 'DVO Time', value: 'dvo_time' },
+            { text: 'BDD Compiler', value: 'bdd_compiler' },
+            { text: 'BDD Bootstrap', value: 'bdd_bootstrap' },
+            { text: 'BDD Compile', value: 'bdd_compile' },
+            { text: 'BDD Timeout', value: 'bdd_timeout' },
+            { text: 'BDD Size', value: 'bdd_size' },
+        ],
+        itemsCsvArtifact: [
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.006,
+                bdd_compile: 44.813,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: '',
+                dvo_time: '',
+                bdd_compiler: '',
+                bdd_bootstrap: null,
+                bdd_compile: null,
+                bdd_timeout: null,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.008,
+                bdd_compile: 45.037,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: '',
+                dvo_time: '',
+                bdd_compiler: '',
+                bdd_bootstrap: null,
+                bdd_compile: null,
+                bdd_timeout: null,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.01,
+                bdd_compile: 32.266,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.006,
+                bdd_compile: 31.951,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: '',
+                dvo_time: '',
+                bdd_compiler: '',
+                bdd_bootstrap: null,
+                bdd_compile: null,
+                bdd_timeout: null,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.006,
+                bdd_compile: 37.242,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: '',
+                dvo_time: '',
+                bdd_compiler: '',
+                bdd_bootstrap: null,
+                bdd_compile: null,
+                bdd_timeout: null,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force',
+                dvo: '',
+                dvo_time: '',
+                bdd_compiler: '',
+                bdd_bootstrap: null,
+                bdd_compile: null,
+                bdd_timeout: null,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.006,
+                bdd_compile: 36.179,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.01,
+                bdd_compile: 34.675,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.009,
+                bdd_compile: 46.592,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: '',
+                dvo_time: '',
+                bdd_compiler: '',
+                bdd_bootstrap: null,
+                bdd_compile: null,
+                bdd_timeout: null,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.007,
+                bdd_compile: 40.298,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.005,
+                bdd_compile: 44.059,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.006,
+                bdd_compile: 36.9,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.006,
+                bdd_compile: 41.094,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.008,
+                bdd_compile: 35.726,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-best',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.01,
+                bdd_compile: 27.533,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.01,
+                bdd_compile: 32.349,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.01,
+                bdd_compile: 41.088,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.005,
+                bdd_compile: 34.342,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: '',
+                dvo_time: '',
+                bdd_compiler: '',
+                bdd_bootstrap: null,
+                bdd_compile: null,
+                bdd_timeout: null,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.01,
+                bdd_compile: 30.061,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.009,
+                bdd_compile: 35.78,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.011,
+                bdd_compile: 36.598,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.009,
+                bdd_compile: 36.843,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: 'SIFTC',
+                dvo_time: '',
+                bdd_compiler: 'cudd',
+                bdd_bootstrap: 0.01,
+                bdd_compile: 31.673,
+                bdd_timeout: false,
+                bdd_size: '',
+            },
+            {
+                input_file: 'busybox.dimacs',
+                input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+                svo: 'force-avg',
+                dvo: '',
+                dvo_time: '',
+                bdd_compiler: '',
+                bdd_bootstrap: null,
+                bdd_compile: null,
+                bdd_timeout: null,
+                bdd_size: '',
+            },
+        ],
+        xmlFile: `
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <feature_model name="FeatureIDE model">
     <feature_tree>
@@ -3053,35 +3083,35 @@ C1164:~FEATURE_SH_NOFORK  or  FEATURE_PREFER_APPLETS
 </constraints>
 </feature_model>
 
-    `
-  }),
-
-  async mounted() {
-    this.loading = true;
-    await this.getFile();
-    this.loading = false;
-    //await this.fetchFeatureModelOfFamily(this.family.id)
-  },
+    `,
+    }),
 
-  watch: {
-    selectedRightFM: function (newValue) {
-      console.log(newValue);
+    async mounted() {
+        this.loading = true;
+        await this.getFile();
+        this.loading = false;
+        //await this.fetchFeatureModelOfFamily(this.family.id)
     },
-  },
 
-  created() {
-    this.showTutorial = !localStorage.fileDetailTutorialCompleted;
-  },
-
-  computed: {
-    isRightFmSelected() {
-      return this.selectedRightFM !== -1;
+    watch: {
+        selectedRightFM: function (newValue) {
+            console.log(newValue);
+        },
     },
-    getMyFM() {
-      return this.$store.state.featureModels.filter((item) => item.owner);
+
+    created() {
+        this.showTutorial = !localStorage.fileDetailTutorialCompleted;
     },
-    getStati() {
-      /*function compute(amount) {
+
+    computed: {
+        isRightFmSelected() {
+            return this.selectedRightFM !== -1;
+        },
+        getMyFM() {
+            return this.$store.state.featureModels.filter((item) => item.owner);
+        },
+        getStati() {
+            /*function compute(amount) {
           return (
               (this.itemsAnalysis.filter((obj) => obj.status === amount)
                   .length /
@@ -3089,78 +3119,78 @@ C1164:~FEATURE_SH_NOFORK  or  FEATURE_PREFER_APPLETS
               100
           );
       }*/
-      return {
-        success: {
-          percentage:
-              (this.itemsAnalysis.filter((obj) => obj.status === 1)
-                      .length /
-                  this.itemsAnalysis.length) *
-              100,
-          absolute: this.itemsAnalysis.filter(
-              (obj) => obj.status === 1
-          ).length,
-        },
-        error: {
-          percentage:
-              (this.itemsAnalysis.filter((obj) => obj.status === -1)
-                      .length /
-                  this.itemsAnalysis.length) *
-              100,
-          absolute: this.itemsAnalysis.filter(
-              (obj) => obj.status === -1
-          ).length,
+            return {
+                success: {
+                    percentage:
+                        (this.itemsAnalysis.filter((obj) => obj.status === 1)
+                            .length /
+                            this.itemsAnalysis.length) *
+                        100,
+                    absolute: this.itemsAnalysis.filter(
+                        (obj) => obj.status === 1
+                    ).length,
+                },
+                error: {
+                    percentage:
+                        (this.itemsAnalysis.filter((obj) => obj.status === -1)
+                            .length /
+                            this.itemsAnalysis.length) *
+                        100,
+                    absolute: this.itemsAnalysis.filter(
+                        (obj) => obj.status === -1
+                    ).length,
+                },
+                progress: {
+                    percentage:
+                        (this.itemsAnalysis.filter((obj) => obj.status === 0)
+                            .length /
+                            this.itemsAnalysis.length) *
+                        100,
+                    absolute: this.itemsAnalysis.filter(
+                        (obj) => obj.status === 0
+                    ).length,
+                },
+                amount: this.itemsAnalysis.length,
+            };
         },
-        progress: {
-          percentage:
-              (this.itemsAnalysis.filter((obj) => obj.status === 0)
-                      .length /
-                  this.itemsAnalysis.length) *
-              100,
-          absolute: this.itemsAnalysis.filter(
-              (obj) => obj.status === 0
-          ).length,
-        },
-        amount: this.itemsAnalysis.length,
-      };
     },
-  },
 
-  methods: {
-    async getFile() {
-      const id = this.$route.params.id;
-      await api
-          .get(`${API_URL}files/uploaded/confirmed/${id}/`)
-          .then((response) => {
-            this.file = response.data;
-          })
-          .catch((error) => {
-            console.log(error);
-          });
-    },
-    deleteItem() {
-      this.dialogDelete = true;
-    },
-    closeDelete() {
-      this.dialogDelete = false;
-    },
-    async deleteItemConfirm() {
-      this.removeLoading = true;
-      await this.$store.dispatch('deleteFeatureModel', this.file.id);
-      await this.$store.dispatch('fetchFiles');
-      this.removeLoading = false;
-      await this.$router.push('/');
-    },
-    showArtifactDialog(item) {
-      this.selectedArtifact = item;
-      this.dialogArtifact = true;
-    },
-    async compare() {
-      this.shouldCompare = true;
-      this.loadingComparableFM = true;
-      await this.$store.dispatch('fetchFeatureModels');
-      this.loadingComparableFM = false;
-    },
-    /*async fetchFeatureModelOfFamily(value) {
+    methods: {
+        async getFile() {
+            const id = this.$route.params.id;
+            await api
+                .get(`${API_URL}files/uploaded/confirmed/${id}/`)
+                .then((response) => {
+                    this.file = response.data;
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
+        },
+        deleteItem() {
+            this.dialogDelete = true;
+        },
+        closeDelete() {
+            this.dialogDelete = false;
+        },
+        async deleteItemConfirm() {
+            this.removeLoading = true;
+            await this.$store.dispatch('deleteFeatureModel', this.file.id);
+            await this.$store.dispatch('fetchFiles');
+            this.removeLoading = false;
+            await this.$router.push('/');
+        },
+        showArtifactDialog(item) {
+            this.selectedArtifact = item;
+            this.dialogArtifact = true;
+        },
+        async compare() {
+            this.shouldCompare = true;
+            this.loadingComparableFM = true;
+            await this.$store.dispatch('fetchFeatureModels');
+            this.loadingComparableFM = false;
+        },
+        /*async fetchFeatureModelOfFamily(value) {
   await api
     .get(`${API_URL}files/uploaded/confirmed/?family=${value}`)
     .then((response) => {
@@ -3168,12 +3198,12 @@ C1164:~FEATURE_SH_NOFORK  or  FEATURE_PREFER_APPLETS
       this.loadingTable = false
     })
 },*/
-  },
+    },
 });
 </script>
 
 <style>
 .pointer-on-hover:hover {
-  cursor: pointer;
+    cursor: pointer;
 }
 </style>

From 087e8bde68577544986bfff0b88b28ded99c0b77 Mon Sep 17 00:00:00 2001
From: lukharsch <lukasharsch@web.de>
Date: Wed, 22 Mar 2023 16:08:08 +0100
Subject: [PATCH 4/8] Added Vue 3 folder, wip

---
 frontendVue3/.browserslistrc                  |    4 +
 frontendVue3/.editorconfig                    |    5 +
 frontendVue3/.env.development                 |    4 +
 frontendVue3/.env.production                  |    5 +
 frontendVue3/.env.testing                     |    4 +
 frontendVue3/.eslintrc.js                     |   10 +
 frontendVue3/.gitignore                       |   22 +
 frontendVue3/.prettierrc                      |    8 +
 frontendVue3/README.md                        |   57 +
 frontendVue3/index.html                       |   16 +
 frontendVue3/jsconfig.json                    |   19 +
 frontendVue3/package-lock.json                | 4224 +++++++++++++++++
 frontendVue3/package.json                     |   30 +
 frontendVue3/public/ddueruem_logo.svg         |   13 +
 frontendVue3/public/ddueruem_logo_dark.svg    |   13 +
 frontendVue3/public/favicon.ico               |  Bin 0 -> 15406 bytes
 frontendVue3/src/App.vue                      |   72 +
 frontendVue3/src/assets/logo.png              |  Bin 0 -> 11955 bytes
 frontendVue3/src/assets/logo.svg              |    6 +
 .../src/components/FeatureModelTable.vue      |  332 ++
 frontendVue3/src/components/Footer.vue        |   27 +
 frontendVue3/src/components/GithubButton.vue  |   22 +
 frontendVue3/src/components/LoginDiv.vue      |  128 +
 frontendVue3/src/components/Navbar.vue        |  299 ++
 .../components/upload_cards/FamilyCreate.vue  |   73 +
 .../components/upload_cards/FileCreate.vue    |  932 ++++
 .../src/components/upload_cards/TagCreate.vue |   81 +
 .../file_create/ActionButtons.vue             |   88 +
 .../upload_cards/file_create/Single.vue       |  277 ++
 frontendVue3/src/main.js                      |    9 +
 frontendVue3/src/plugins/index.js             |    9 +
 frontendVue3/src/plugins/vuetify.js           |   25 +
 frontendVue3/src/plugins/webfontloader.js     |   11 +
 frontendVue3/src/router/index.js              |   48 +
 .../services/FeatureModel/collapse.service.js |    9 +
 .../services/FeatureModel/count.service.js    |   85 +
 .../FeatureModel/createPaths.service.js       |   84 +
 .../FeatureModel/dragAndDrop.service.js       |  248 +
 .../src/services/FeatureModel/init.service.js |   76 +
 .../services/FeatureModel/search.service.js   |   42 +
 .../services/FeatureModel/update.service.js   |  558 +++
 .../src/services/FeatureModel/view.service.js |   49 +
 .../FeatureModel/windowResize.service.js      |   15 +
 frontendVue3/src/services/api.service.js      |   68 +
 frontendVue3/src/services/auth.service.js     |   68 +
 .../booleanExpressionParser.service.js        |   98 +
 .../src/services/collaboration.service.js     |    3 +
 .../src/services/fileDeletion.service.js      |   27 +
 frontendVue3/src/services/numbers.service.js  |    3 +
 .../src/services/xmlTranspiler.service.js     |  212 +
 frontendVue3/src/store/app.js                 |   40 +
 frontendVue3/src/store/auth.js                |   55 +
 frontendVue3/src/store/file.js                |  143 +
 frontendVue3/src/store/index.js               |    4 +
 frontendVue3/src/styles/settings.scss         |   10 +
 frontendVue3/src/views/DSGVO.vue              |  220 +
 frontendVue3/src/views/Histories.vue          |  241 +
 frontendVue3/src/views/Home.vue               |  131 +
 frontendVue3/src/views/Login.vue              |   19 +
 frontendVue3/src/views/Models.vue             |  151 +
 frontendVue3/src/views/Profile.vue            |  204 +
 frontendVue3/vite.config.js                   |   33 +
 62 files changed, 9769 insertions(+)
 create mode 100644 frontendVue3/.browserslistrc
 create mode 100644 frontendVue3/.editorconfig
 create mode 100644 frontendVue3/.env.development
 create mode 100644 frontendVue3/.env.production
 create mode 100644 frontendVue3/.env.testing
 create mode 100644 frontendVue3/.eslintrc.js
 create mode 100644 frontendVue3/.gitignore
 create mode 100644 frontendVue3/.prettierrc
 create mode 100644 frontendVue3/README.md
 create mode 100644 frontendVue3/index.html
 create mode 100644 frontendVue3/jsconfig.json
 create mode 100644 frontendVue3/package-lock.json
 create mode 100644 frontendVue3/package.json
 create mode 100644 frontendVue3/public/ddueruem_logo.svg
 create mode 100644 frontendVue3/public/ddueruem_logo_dark.svg
 create mode 100644 frontendVue3/public/favicon.ico
 create mode 100644 frontendVue3/src/App.vue
 create mode 100644 frontendVue3/src/assets/logo.png
 create mode 100644 frontendVue3/src/assets/logo.svg
 create mode 100644 frontendVue3/src/components/FeatureModelTable.vue
 create mode 100644 frontendVue3/src/components/Footer.vue
 create mode 100644 frontendVue3/src/components/GithubButton.vue
 create mode 100644 frontendVue3/src/components/LoginDiv.vue
 create mode 100644 frontendVue3/src/components/Navbar.vue
 create mode 100644 frontendVue3/src/components/upload_cards/FamilyCreate.vue
 create mode 100644 frontendVue3/src/components/upload_cards/FileCreate.vue
 create mode 100644 frontendVue3/src/components/upload_cards/TagCreate.vue
 create mode 100644 frontendVue3/src/components/upload_cards/file_create/ActionButtons.vue
 create mode 100644 frontendVue3/src/components/upload_cards/file_create/Single.vue
 create mode 100644 frontendVue3/src/main.js
 create mode 100644 frontendVue3/src/plugins/index.js
 create mode 100644 frontendVue3/src/plugins/vuetify.js
 create mode 100644 frontendVue3/src/plugins/webfontloader.js
 create mode 100644 frontendVue3/src/router/index.js
 create mode 100644 frontendVue3/src/services/FeatureModel/collapse.service.js
 create mode 100644 frontendVue3/src/services/FeatureModel/count.service.js
 create mode 100644 frontendVue3/src/services/FeatureModel/createPaths.service.js
 create mode 100644 frontendVue3/src/services/FeatureModel/dragAndDrop.service.js
 create mode 100644 frontendVue3/src/services/FeatureModel/init.service.js
 create mode 100644 frontendVue3/src/services/FeatureModel/search.service.js
 create mode 100644 frontendVue3/src/services/FeatureModel/update.service.js
 create mode 100644 frontendVue3/src/services/FeatureModel/view.service.js
 create mode 100644 frontendVue3/src/services/FeatureModel/windowResize.service.js
 create mode 100644 frontendVue3/src/services/api.service.js
 create mode 100644 frontendVue3/src/services/auth.service.js
 create mode 100644 frontendVue3/src/services/booleanExpressionParser.service.js
 create mode 100644 frontendVue3/src/services/collaboration.service.js
 create mode 100644 frontendVue3/src/services/fileDeletion.service.js
 create mode 100644 frontendVue3/src/services/numbers.service.js
 create mode 100644 frontendVue3/src/services/xmlTranspiler.service.js
 create mode 100644 frontendVue3/src/store/app.js
 create mode 100644 frontendVue3/src/store/auth.js
 create mode 100644 frontendVue3/src/store/file.js
 create mode 100644 frontendVue3/src/store/index.js
 create mode 100644 frontendVue3/src/styles/settings.scss
 create mode 100644 frontendVue3/src/views/DSGVO.vue
 create mode 100644 frontendVue3/src/views/Histories.vue
 create mode 100644 frontendVue3/src/views/Home.vue
 create mode 100644 frontendVue3/src/views/Login.vue
 create mode 100644 frontendVue3/src/views/Models.vue
 create mode 100644 frontendVue3/src/views/Profile.vue
 create mode 100644 frontendVue3/vite.config.js

diff --git a/frontendVue3/.browserslistrc b/frontendVue3/.browserslistrc
new file mode 100644
index 00000000..dc3bc09a
--- /dev/null
+++ b/frontendVue3/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
diff --git a/frontendVue3/.editorconfig b/frontendVue3/.editorconfig
new file mode 100644
index 00000000..7053c49a
--- /dev/null
+++ b/frontendVue3/.editorconfig
@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/frontendVue3/.env.development b/frontendVue3/.env.development
new file mode 100644
index 00000000..99a38bbf
--- /dev/null
+++ b/frontendVue3/.env.development
@@ -0,0 +1,4 @@
+VITE_APP_DOMAIN="http://localhost:8000/"
+VITE_APP_DOMAIN_FRONTEND="http://localhost:3000/"
+VITE_APP_DOMAIN_WEBSOCKET="localhost"
+VITE_APP_DOMAIN_WEBSOCKET_PORT=9000
diff --git a/frontendVue3/.env.production b/frontendVue3/.env.production
new file mode 100644
index 00000000..35fb2632
--- /dev/null
+++ b/frontendVue3/.env.production
@@ -0,0 +1,5 @@
+VITE_APP_DOMAIN="https://doener.tobiasbetz.de/"
+VITE_APP_DOMAIN_FRONTEND="https://ddueruem.tobiasbetz.de/"
+VITE_APP_DOMAIN_WEBSOCKET="boerek.tobiasbetz.de"
+VITE_APP_DOMAIN_WEBSOCKET_PORT=443
+NODE_ENV="production"
\ No newline at end of file
diff --git a/frontendVue3/.env.testing b/frontendVue3/.env.testing
new file mode 100644
index 00000000..99a38bbf
--- /dev/null
+++ b/frontendVue3/.env.testing
@@ -0,0 +1,4 @@
+VITE_APP_DOMAIN="http://localhost:8000/"
+VITE_APP_DOMAIN_FRONTEND="http://localhost:3000/"
+VITE_APP_DOMAIN_WEBSOCKET="localhost"
+VITE_APP_DOMAIN_WEBSOCKET_PORT=9000
diff --git a/frontendVue3/.eslintrc.js b/frontendVue3/.eslintrc.js
new file mode 100644
index 00000000..6e7e1b14
--- /dev/null
+++ b/frontendVue3/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+  ],
+}
diff --git a/frontendVue3/.gitignore b/frontendVue3/.gitignore
new file mode 100644
index 00000000..11f5d714
--- /dev/null
+++ b/frontendVue3/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/frontendVue3/.prettierrc b/frontendVue3/.prettierrc
new file mode 100644
index 00000000..5a13dda7
--- /dev/null
+++ b/frontendVue3/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}
\ No newline at end of file
diff --git a/frontendVue3/README.md b/frontendVue3/README.md
new file mode 100644
index 00000000..f080963f
--- /dev/null
+++ b/frontendVue3/README.md
@@ -0,0 +1,57 @@
+# essentials
+
+## Project setup
+
+```
+# yarn
+yarn
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+# yarn
+yarn dev
+
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+```
+
+### Compiles and minifies for production
+
+```
+# yarn
+yarn build
+
+# npm
+npm run build
+
+# pnpm
+pnpm build
+```
+
+### Lints and fixes files
+
+```
+# yarn
+yarn lint
+
+# npm
+npm run lint
+
+# pnpm
+pnpm lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://vitejs.dev/config/).
diff --git a/frontendVue3/index.html b/frontendVue3/index.html
new file mode 100644
index 00000000..0b4e17cc
--- /dev/null
+++ b/frontendVue3/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome to Vuetify 3</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/frontendVue3/jsconfig.json b/frontendVue3/jsconfig.json
new file mode 100644
index 00000000..4aafc5f6
--- /dev/null
+++ b/frontendVue3/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
diff --git a/frontendVue3/package-lock.json b/frontendVue3/package-lock.json
new file mode 100644
index 00000000..fdb99313
--- /dev/null
+++ b/frontendVue3/package-lock.json
@@ -0,0 +1,4224 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "frontend",
+      "version": "0.0.0",
+      "dependencies": {
+        "@mdi/font": "7.0.96",
+        "axios": "^1.3.4",
+        "core-js": "^3.8.3",
+        "pinia": "^2.0.23",
+        "roboto-fontface": "*",
+        "vue": "^3.2.13",
+        "vue-router": "^4.0.0",
+        "vuetify": "^3.0.0",
+        "webfontloader": "^1.0.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^3.0.3",
+        "eslint": "^8.22.0",
+        "eslint-plugin-vue": "^9.3.0",
+        "sass": "^1.55.0",
+        "vite": "^3.1.9",
+        "vite-plugin-vuetify": "^1.0.0-alpha.12"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
+      "integrity": "sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz",
+      "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
+      "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.4.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
+      "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "node_modules/@mdi/font": {
+      "version": "7.0.96",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.0.96.tgz",
+      "integrity": "sha512-rzlxTfR64hqY8yiBzDjmANfcd8rv+T5C0Yedv/TWk2QyAQYdc66e0kaN1ipmnYU3RukHRTRcBARHzzm+tIhL7w=="
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
+      "integrity": "sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==",
+      "dev": true,
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^3.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "dependencies": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
+      "dependencies": {
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "dependencies": {
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "dependencies": {
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "csstype": "^2.6.8"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
+      },
+      "peerDependencies": {
+        "vue": "3.2.47"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
+    "node_modules/@vuetify/loader-shared": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz",
+      "integrity": "sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==",
+      "devOptional": true,
+      "dependencies": {
+        "find-cache-dir": "^3.3.2",
+        "upath": "^2.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0",
+        "vuetify": "^3.0.0-beta.4"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "devOptional": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "devOptional": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "devOptional": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "devOptional": true
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/core-js": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
+      "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "devOptional": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
+      "integrity": "sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.15.18",
+        "@esbuild/linux-loong64": "0.15.18",
+        "esbuild-android-64": "0.15.18",
+        "esbuild-android-arm64": "0.15.18",
+        "esbuild-darwin-64": "0.15.18",
+        "esbuild-darwin-arm64": "0.15.18",
+        "esbuild-freebsd-64": "0.15.18",
+        "esbuild-freebsd-arm64": "0.15.18",
+        "esbuild-linux-32": "0.15.18",
+        "esbuild-linux-64": "0.15.18",
+        "esbuild-linux-arm": "0.15.18",
+        "esbuild-linux-arm64": "0.15.18",
+        "esbuild-linux-mips64le": "0.15.18",
+        "esbuild-linux-ppc64le": "0.15.18",
+        "esbuild-linux-riscv64": "0.15.18",
+        "esbuild-linux-s390x": "0.15.18",
+        "esbuild-netbsd-64": "0.15.18",
+        "esbuild-openbsd-64": "0.15.18",
+        "esbuild-sunos-64": "0.15.18",
+        "esbuild-windows-32": "0.15.18",
+        "esbuild-windows-64": "0.15.18",
+        "esbuild-windows-arm64": "0.15.18"
+      }
+    },
+    "node_modules/esbuild-android-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.18.tgz",
+      "integrity": "sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-android-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.18.tgz",
+      "integrity": "sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-darwin-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz",
+      "integrity": "sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-darwin-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.18.tgz",
+      "integrity": "sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.18.tgz",
+      "integrity": "sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-freebsd-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.18.tgz",
+      "integrity": "sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-32": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.18.tgz",
+      "integrity": "sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.18.tgz",
+      "integrity": "sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.18.tgz",
+      "integrity": "sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.18.tgz",
+      "integrity": "sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-mips64le": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.18.tgz",
+      "integrity": "sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-ppc64le": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.18.tgz",
+      "integrity": "sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-riscv64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.18.tgz",
+      "integrity": "sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-linux-s390x": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.18.tgz",
+      "integrity": "sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-netbsd-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.18.tgz",
+      "integrity": "sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-openbsd-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.18.tgz",
+      "integrity": "sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-sunos-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz",
+      "integrity": "sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-32": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.18.tgz",
+      "integrity": "sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz",
+      "integrity": "sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild-windows-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.18.tgz",
+      "integrity": "sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
+      "dev": true,
+      "dependencies": {
+        "@eslint/eslintrc": "^1.4.1",
+        "@humanwhocodes/config-array": "^0.11.8",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.4.0",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "grapheme-splitter": "^1.0.4",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-vue": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.9.0.tgz",
+      "integrity": "sha512-YbubS7eK0J7DCf0U2LxvVP7LMfs6rC6UltihIgval3azO3gyDwEGVgsCMe1TmDiEkl6GdMKfRpaME6QxIYtzDQ==",
+      "dev": true,
+      "dependencies": {
+        "eslint-utils": "^3.0.0",
+        "natural-compare": "^1.4.0",
+        "nth-check": "^2.0.1",
+        "postcss-selector-parser": "^6.0.9",
+        "semver": "^7.3.5",
+        "vue-eslint-parser": "^9.0.1",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
+      }
+    },
+    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz",
+      "integrity": "sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.2.tgz",
+      "integrity": "sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "devOptional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "devOptional": true,
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "dev": true
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "devOptional": true
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.20.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "dev": true
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "devOptional": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
+      "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
+      "devOptional": true
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "devOptional": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "devOptional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/js-sdsl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
+      "integrity": "sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/js-sdsl"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "devOptional": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "devOptional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "devOptional": true
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "devOptional": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.32.tgz",
+      "integrity": "sha512-8Tw4OrpCSJ028UUyp0gYPP/wyjigLoEceuO/x1G+FlHVf73337e5vLm4uDmrRIoBG1hvaed/eSHnrCFjOc4nkA==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "devOptional": true,
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "devOptional": true,
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "devOptional": true,
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "devOptional": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "devOptional": true,
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "node_modules/punycode": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "devOptional": true,
+      "dependencies": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/roboto-fontface": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
+    },
+    "node_modules/rollup": {
+      "version": "2.79.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "devOptional": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.58.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
+      "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "devOptional": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "devOptional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/upath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "node_modules/vite": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",
+      "integrity": "sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==",
+      "devOptional": true,
+      "dependencies": {
+        "esbuild": "^0.15.9",
+        "postcss": "^8.4.18",
+        "resolve": "^1.22.1",
+        "rollup": "^2.79.1"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      },
+      "peerDependencies": {
+        "@types/node": ">= 14",
+        "less": "*",
+        "sass": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-vuetify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.2.tgz",
+      "integrity": "sha512-MubIcKD33O8wtgQXlbEXE7ccTEpHZ8nPpe77y9Wy3my2MWw/PgehP9VqTp92BLqr0R1dSL970Lynvisx3UxBFw==",
+      "devOptional": true,
+      "dependencies": {
+        "@vuetify/loader-shared": "^1.7.1",
+        "debug": "^4.3.3",
+        "upath": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vite": "^2.7.0 || ^3.0.0 || ^4.0.0",
+        "vuetify": "^3.0.0-beta.4"
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/vue-eslint-parser": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
+      "integrity": "sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.6"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
+      "integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vuetify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.1.6.tgz",
+      "integrity": "sha512-4We27L5ksy8esNKfUPWPucEU+M7XJDO2o66zXL5qiBVbALwshcK2CAobLQMx+ALtkLENXAYNH3RzvfAYjTi3Aw==",
+      "engines": {
+        "node": "^12.20 || >=14.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "vite-plugin-vuetify": "^1.0.0-alpha.12",
+        "vue": "^3.2.0",
+        "vue-i18n": "^9.0.0",
+        "webpack-plugin-vuetify": "^2.0.0-alpha.11"
+      },
+      "peerDependenciesMeta": {
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "vue-i18n": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webfontloader": {
+      "version": "1.6.28",
+      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+      "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  },
+  "dependencies": {
+    "@babel/parser": {
+      "version": "7.21.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.2.tgz",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ=="
+    },
+    "@esbuild/android-arm": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
+      "integrity": "sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==",
+      "optional": true
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz",
+      "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
+      "optional": true
+    },
+    "@eslint/eslintrc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
+      "integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.4.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      }
+    },
+    "@humanwhocodes/config-array": {
+      "version": "0.11.8",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
+      "integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.5"
+      }
+    },
+    "@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "@mdi/font": {
+      "version": "7.0.96",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.0.96.tgz",
+      "integrity": "sha512-rzlxTfR64hqY8yiBzDjmANfcd8rv+T5C0Yedv/TWk2QyAQYdc66e0kaN1ipmnYU3RukHRTRcBARHzzm+tIhL7w=="
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@vitejs/plugin-vue": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
+      "integrity": "sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==",
+      "dev": true,
+      "requires": {}
+    },
+    "@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "requires": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "requires": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
+    "@vue/reactivity": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
+      "requires": {
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "@vue/runtime-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "requires": {
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/runtime-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "requires": {
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "csstype": "^2.6.8"
+      }
+    },
+    "@vue/server-renderer": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "requires": {
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
+    "@vuetify/loader-shared": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz",
+      "integrity": "sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==",
+      "devOptional": true,
+      "requires": {
+        "find-cache-dir": "^3.3.2",
+        "upath": "^2.0.1"
+      }
+    },
+    "acorn": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "dev": true
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "devOptional": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "devOptional": true
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "devOptional": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "devOptional": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "devOptional": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+      "devOptional": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "core-js": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
+      "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw=="
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "csstype": {
+      "version": "2.6.21",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+    },
+    "debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "devOptional": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "esbuild": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
+      "integrity": "sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==",
+      "devOptional": true,
+      "requires": {
+        "@esbuild/android-arm": "0.15.18",
+        "@esbuild/linux-loong64": "0.15.18",
+        "esbuild-android-64": "0.15.18",
+        "esbuild-android-arm64": "0.15.18",
+        "esbuild-darwin-64": "0.15.18",
+        "esbuild-darwin-arm64": "0.15.18",
+        "esbuild-freebsd-64": "0.15.18",
+        "esbuild-freebsd-arm64": "0.15.18",
+        "esbuild-linux-32": "0.15.18",
+        "esbuild-linux-64": "0.15.18",
+        "esbuild-linux-arm": "0.15.18",
+        "esbuild-linux-arm64": "0.15.18",
+        "esbuild-linux-mips64le": "0.15.18",
+        "esbuild-linux-ppc64le": "0.15.18",
+        "esbuild-linux-riscv64": "0.15.18",
+        "esbuild-linux-s390x": "0.15.18",
+        "esbuild-netbsd-64": "0.15.18",
+        "esbuild-openbsd-64": "0.15.18",
+        "esbuild-sunos-64": "0.15.18",
+        "esbuild-windows-32": "0.15.18",
+        "esbuild-windows-64": "0.15.18",
+        "esbuild-windows-arm64": "0.15.18"
+      }
+    },
+    "esbuild-android-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.18.tgz",
+      "integrity": "sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==",
+      "optional": true
+    },
+    "esbuild-android-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.18.tgz",
+      "integrity": "sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==",
+      "optional": true
+    },
+    "esbuild-darwin-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz",
+      "integrity": "sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==",
+      "optional": true
+    },
+    "esbuild-darwin-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.18.tgz",
+      "integrity": "sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==",
+      "optional": true
+    },
+    "esbuild-freebsd-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.18.tgz",
+      "integrity": "sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==",
+      "optional": true
+    },
+    "esbuild-freebsd-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.18.tgz",
+      "integrity": "sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==",
+      "optional": true
+    },
+    "esbuild-linux-32": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.18.tgz",
+      "integrity": "sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==",
+      "optional": true
+    },
+    "esbuild-linux-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.18.tgz",
+      "integrity": "sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==",
+      "optional": true
+    },
+    "esbuild-linux-arm": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.18.tgz",
+      "integrity": "sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==",
+      "optional": true
+    },
+    "esbuild-linux-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.18.tgz",
+      "integrity": "sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==",
+      "optional": true
+    },
+    "esbuild-linux-mips64le": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.18.tgz",
+      "integrity": "sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==",
+      "optional": true
+    },
+    "esbuild-linux-ppc64le": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.18.tgz",
+      "integrity": "sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==",
+      "optional": true
+    },
+    "esbuild-linux-riscv64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.18.tgz",
+      "integrity": "sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==",
+      "optional": true
+    },
+    "esbuild-linux-s390x": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.18.tgz",
+      "integrity": "sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==",
+      "optional": true
+    },
+    "esbuild-netbsd-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.18.tgz",
+      "integrity": "sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==",
+      "optional": true
+    },
+    "esbuild-openbsd-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.18.tgz",
+      "integrity": "sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==",
+      "optional": true
+    },
+    "esbuild-sunos-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz",
+      "integrity": "sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==",
+      "optional": true
+    },
+    "esbuild-windows-32": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.18.tgz",
+      "integrity": "sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==",
+      "optional": true
+    },
+    "esbuild-windows-64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz",
+      "integrity": "sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==",
+      "optional": true
+    },
+    "esbuild-windows-arm64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.18.tgz",
+      "integrity": "sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==",
+      "optional": true
+    },
+    "escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true
+    },
+    "eslint": {
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
+      "dev": true,
+      "requires": {
+        "@eslint/eslintrc": "^1.4.1",
+        "@humanwhocodes/config-array": "^0.11.8",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.4.0",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "grapheme-splitter": "^1.0.4",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-sdsl": "^4.1.4",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0"
+      }
+    },
+    "eslint-plugin-vue": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.9.0.tgz",
+      "integrity": "sha512-YbubS7eK0J7DCf0U2LxvVP7LMfs6rC6UltihIgval3azO3gyDwEGVgsCMe1TmDiEkl6GdMKfRpaME6QxIYtzDQ==",
+      "dev": true,
+      "requires": {
+        "eslint-utils": "^3.0.0",
+        "natural-compare": "^1.4.0",
+        "nth-check": "^2.0.1",
+        "postcss-selector-parser": "^6.0.9",
+        "semver": "^7.3.5",
+        "vue-eslint-parser": "^9.0.1",
+        "xml-name-validator": "^4.0.0"
+      }
+    },
+    "eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      }
+    },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        }
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true
+    },
+    "espree": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.1.tgz",
+      "integrity": "sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
+    "esquery": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.2.tgz",
+      "integrity": "sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      }
+    },
+    "estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true
+    },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
+    "fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "devOptional": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "devOptional": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      }
+    },
+    "find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "flatted": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
+      "dev": true
+    },
+    "follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "devOptional": true
+    },
+    "glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.3"
+      }
+    },
+    "globals": {
+      "version": "13.20.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.20.2"
+      }
+    },
+    "grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "dev": true
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "devOptional": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
+    "ignore": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "dev": true
+    },
+    "immutable": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
+      "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
+      "devOptional": true
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-core-module": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "devOptional": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "devOptional": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "devOptional": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "devOptional": true
+    },
+    "is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "js-sdsl": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
+      "integrity": "sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==",
+      "dev": true
+    },
+    "js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1"
+      }
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
+    "levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      }
+    },
+    "locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^5.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "devOptional": true,
+      "requires": {
+        "semver": "^6.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "devOptional": true
+        }
+      }
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "devOptional": true
+    },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "devOptional": true
+    },
+    "nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "requires": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      }
+    },
+    "p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "requires": {
+        "yocto-queue": "^0.1.0"
+      }
+    },
+    "p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^3.0.2"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "devOptional": true
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "devOptional": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "devOptional": true
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "devOptional": true
+    },
+    "pinia": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.32.tgz",
+      "integrity": "sha512-8Tw4OrpCSJ028UUyp0gYPP/wyjigLoEceuO/x1G+FlHVf73337e5vLm4uDmrRIoBG1hvaed/eSHnrCFjOc4nkA==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
+    "pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "devOptional": true,
+      "requires": {
+        "find-up": "^4.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "devOptional": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "devOptional": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "devOptional": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "devOptional": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        }
+      }
+    },
+    "postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true
+    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "punycode": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "dev": true
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "devOptional": true,
+      "requires": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "roboto-fontface": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
+    },
+    "rollup": {
+      "version": "2.79.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
+      "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "devOptional": true,
+      "requires": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "sass": {
+      "version": "1.58.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
+      "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
+      "devOptional": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "semver": {
+      "version": "7.3.8",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^6.0.0"
+      }
+    },
+    "shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
+    "strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "devOptional": true
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "devOptional": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "^1.2.1"
+      }
+    },
+    "type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true
+    },
+    "upath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+      "devOptional": true
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "vite": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz",
+      "integrity": "sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==",
+      "devOptional": true,
+      "requires": {
+        "esbuild": "^0.15.9",
+        "fsevents": "~2.3.2",
+        "postcss": "^8.4.18",
+        "resolve": "^1.22.1",
+        "rollup": "^2.79.1"
+      }
+    },
+    "vite-plugin-vuetify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.2.tgz",
+      "integrity": "sha512-MubIcKD33O8wtgQXlbEXE7ccTEpHZ8nPpe77y9Wy3my2MWw/PgehP9VqTp92BLqr0R1dSL970Lynvisx3UxBFw==",
+      "devOptional": true,
+      "requires": {
+        "@vuetify/loader-shared": "^1.7.1",
+        "debug": "^4.3.3",
+        "upath": "^2.0.1"
+      }
+    },
+    "vue": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "requires": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "vue-eslint-parser": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
+      "integrity": "sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.6"
+      }
+    },
+    "vue-router": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
+      "integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.4.5"
+      }
+    },
+    "vuetify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.1.6.tgz",
+      "integrity": "sha512-4We27L5ksy8esNKfUPWPucEU+M7XJDO2o66zXL5qiBVbALwshcK2CAobLQMx+ALtkLENXAYNH3RzvfAYjTi3Aw==",
+      "requires": {}
+    },
+    "webfontloader": {
+      "version": "1.6.28",
+      "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+      "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    },
+    "xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true
+    }
+  }
+}
diff --git a/frontendVue3/package.json b/frontendVue3/package.json
new file mode 100644
index 00000000..7c2d8016
--- /dev/null
+++ b/frontendVue3/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint  --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@mdi/font": "7.0.96",
+    "axios": "^1.3.4",
+    "core-js": "^3.8.3",
+    "pinia": "^2.0.23",
+    "roboto-fontface": "*",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.0",
+    "vuetify": "^3.0.0",
+    "webfontloader": "^1.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.0.3",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "sass": "^1.55.0",
+    "vite": "^3.1.9",
+    "vite-plugin-vuetify": "^1.0.0-alpha.12"
+  }
+}
diff --git a/frontendVue3/public/ddueruem_logo.svg b/frontendVue3/public/ddueruem_logo.svg
new file mode 100644
index 00000000..d4a49c04
--- /dev/null
+++ b/frontendVue3/public/ddueruem_logo.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <ellipse style="stroke: rgb(0,0,0); fill: none; stroke-width: 20px;" cx="250.209" cy="250.263" rx="238.228" ry="238.228"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0,0,0); stroke-width: 20px;" x1="91.285" y1="71.592" x2="407.617" y2="71.592"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0,0,0); stroke-width: 20px;" x1="70.521" y1="406.244" x2="71.538" y2="93.62"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0,0,0); stroke-width: 20px;" x1="91.815" y1="428.564" x2="409.701" y2="428.935"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0,0,0); stroke-width: 20px;" x1="428.881" y1="92.031" x2="428.881" y2="405.714"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0,0,0); stroke-width: 20px;" x1="190.776" y1="72.733" x2="190.652" y2="428.935"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0,0,0); stroke-width: 20px;" x1="311.03" y1="247.257" x2="428.881" y2="247.257"/>
+  <polyline style="stroke: rgb(0,0,0); fill: none; stroke-width: 20px;" points="190.776 72.733 309.766 247.257 190.652 428.935"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0,0,0); stroke-width: 20px;" x1="71.719" y1="189.905" x2="190.652" y2="190.706"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(0,0,0); stroke-width: 20px;" x1="71.719" y1="309.019" x2="190.652" y2="309.82"/>
+</svg>
\ No newline at end of file
diff --git a/frontendVue3/public/ddueruem_logo_dark.svg b/frontendVue3/public/ddueruem_logo_dark.svg
new file mode 100644
index 00000000..f1f233d5
--- /dev/null
+++ b/frontendVue3/public/ddueruem_logo_dark.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <ellipse style="stroke: rgb(256,256,256); fill: none; stroke-width: 20px;" cx="250.209" cy="250.263" rx="238.228" ry="238.228"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(256,256,256); stroke-width: 20px;" x1="91.285" y1="71.592" x2="407.617" y2="71.592"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(256,256,256); stroke-width: 20px;" x1="70.521" y1="406.244" x2="71.538" y2="93.62"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(256,256,256); stroke-width: 20px;" x1="91.815" y1="428.564" x2="409.701" y2="428.935"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(256,256,256); stroke-width: 20px;" x1="428.881" y1="92.031" x2="428.881" y2="405.714"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(256,256,256); stroke-width: 20px;" x1="190.776" y1="72.733" x2="190.652" y2="428.935"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(256,256,256); stroke-width: 20px;" x1="311.03" y1="247.257" x2="428.881" y2="247.257"/>
+  <polyline style="stroke: rgb(256,256,256); fill: none; stroke-width: 20px;" points="190.776 72.733 309.766 247.257 190.652 428.935"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(256,256,256); stroke-width: 20px;" x1="71.719" y1="189.905" x2="190.652" y2="190.706"/>
+  <line style="fill: rgb(216, 216, 216); stroke: rgb(256,256,256); stroke-width: 20px;" x1="71.719" y1="309.019" x2="190.652" y2="309.82"/>
+</svg>
\ No newline at end of file
diff --git a/frontendVue3/public/favicon.ico b/frontendVue3/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8fb9f91b3aab4eec0c76ffc5342528033c61e247
GIT binary patch
literal 15406
zcmeHO3v5%@8NNVarCoU?zSqezmT6npu}xxXJJhY(x=s~hQ>SSYYSncU&|(|9Y?QVX
z@}TB1G8mASM;tRKYgJkrAW)&g7${B%c>oE7;)O>NNO_bu4G-IdNB({Pb<Xw8^|j;J
zP9IaQbaZ@={r}&0{`30JIlm>TkJL{ZGDJe2DLL+vq#sL?l$jZPe_*I2y@|4sBRjso
zUy`aUlJo$60})6B%aMKN&yMG1<zTj~#0%`PD=WP-l$G(wmp-5NV42-|r~YN-j;}EF
z!EWm41KA2B+Uc;;wdHaJu^D50JQJ0tSyrSo^JVh8QlE}dT!P$YA<OxZnF{#}EhosG
zeot3AX!pF7QkycW%w}yDI`+K;d6!H+m+XutPp3D1ooe$NsOrUmkbO(Y?|Q+i$_HGs
z&;R<+;gNJuQ^|W&<0Pue&il`V)O5&S6FROgV;jhHz0k7OOrDxc9z|+b<*Re9Q_ZxD
zGMkbu<S!Kj<)Ne9@3uUu*Fog$3)xyEqP_XR&tVR0JmWI&h8>Qvjth%4dDy{HM^34)
z&_TyGJg3UC{J|n2-wr)LDYwhNWBH4VL-JgYz;erTEKiMF20`|$Cf~GysBU40j@&)u
zboK>@(yL25%R|RmS~6@99bG>PviV`j>&k~M@~J%cn{`uCzUOyY^23rlWt6DH=aut3
zlZo^g63<V)Px39mb5D2XpJX%e*yU#rzA8VPY`wAQ+xAE0UaSMBK6+I-MQ<zj#v+r<
z-;~>xIXwP(4)hgT<|I>hSGqh7YbLP$jL+%p0>vM2Su?wmOV;-uyLFww=KN5Ox{j<%
zmi}mZc22bZyxbmI!x+Ch3+qsk+#YbHJ{C<j(eH}KO8v_0%6@&_#b;iJu#VPKF`Tj<
zddh6FP2d^x<FmE3+};!Lo^eBlV7)qT#1-!crUmh_ex0WR_DYlc!0z(|mRY`QGR7g+
zUtWXZ6BQ&EU6RTsTF02->dQjDh~;LRJB63Pq&~p<P>*N){PEn7FA;EAwj=|b_AUGw
z{Eb1Zt8`N8chL?vjkw~yAvg~N+W_qV|N7U7a3HGfPY0GBqUxOaLJzPO2|Qz7H&yF{
z!Y@7SbxH$-Y<F|`UN6%A#q6`)psMNLX8Bs%(7~90&Ka@!UHHRlAJqDyJhi*H{CjFF
zwgCTAs{MP=XROTrK<FurG7kuUT5y0*+j`BV$U-*OoSHVcflst&Zimkb-?=9H36_sG
z4_+|%!^{KYaz(7T{5v|jaU>lpxgCaImE$Fk6T4dUMU!=a+u##*PZb&m9d@{VbA<&v
z;n*Hvm#Nt5zF}Ud{=9#v%+3;8${f~WV?Q`CFATe5JXp$wT(q1TOU7#0jK6PDXZ)(1
zOSF4N3hStRA?+K$*ZctH(lRF!KFSL%W20hM6%Rz+k9We?_C36J>PVG2%Y`27X;nW+
z*x`6oe7S`dXABgw#vFYvuM;-c|L9ua=7z9?9B!c<e!%kV2Lk(~z;Dsbfnp5kbM(bL
zBQC#F<Aw}s-f%q(pE>L=Fyiz34xz{6kpCd?PeyG2V7mkg<?H?>!!m@d$btKgDK_Ib
zt|Qt#$Am-fZ&{xA0GOAnn8Ue+QQBY3NiO*vfvd{5lsp3L_K5f@hhj{}^Nk#us4?p+
ztOM)g!<ZNEnCxe@^+4AS?eNzgQL(WP2JW7y*o-gIp?_gaEQUR13og@H4?lHN<<&Y2
zGhAJn1$%I*FYm)?|LP%eCy(>1L3Ff(Tk8KQe4khoQS4_&0;4zo|FQr(iM%k4L+U*z
zff0J2FQWxM*K?>u4d$6_8R>l`cK<L@ykyF&XW4e^)&tY5TWNLX-O1G5)4F*5!#Ubh
z@LO7|vy|3LuPaY|nbt&)Ej<-?5!=}B;=Lby|7};@>8U+!w`A!D@A2^2+L%A~GSv8*
z(uV!wgk<UONj;SgMF#IPDtG3ORR4-X*#Dl1XTRH%T#dTDW2FJ`*H`Gd^XE$Rq07N@
z#1%M4jQiZeh?nel+}}PC=`8TX-}u}|K7XS~R?iBOjh(2zT@zC8E3>D)YqY(1-;X}j
zv4?n<R;AvTC|<JV(Qlqax+3@*^PQ8d#CtH@$zJglDNiOFKM{Q$Yt?^^oQ>}%=LOp!
z;8GgCC~I2q%*#5{$kpuKJ6-ET<XbK~d-6^o*7o4I2h8;!oAEW4)%-Qshl1n4aw3j6
ziCAgH^t-CD83W60)}`Qi$H>*}o#)Z>p>vQsxF25{?c6CQ5()gsGtn{<JTI7WH7nyW
z+%i|!hYID3zU3(oCqN+~(b9?XXz=uzag9`VI9K6yK+L6l2K;YYBB^IZ36Y6IxMI@q
zp&onMrbt}P$~$}sjX%c1ZHxn39PmjIDW9bL20SmDaWyNe`HMoWZ-ngMF_xP?t9xQK
z_GZfxt-Uwf((fsEC~M5Pnw4>Ul`*ykb!bDMnnlGUdfYdn+9lsY%+pJ_Z_xHs+imH?
z!L`+luUT1yv*4C1Z&<#Qlui*r2~lxBI`sAm+}oX{s=OcRf9A0%Q^56>8DC==kKtgy
z>D-TeE@f3uu4&Y?ZVVlM3wLg~Z>Y}xfNE|1MIAijELQN`Y2<45F5=t5>wtYuk>yuH
zXEJj-vN;uZD0|537U$Eq5Oek?f#JlNGq{dN(qiDuxO185eWG@Tuk1zKUsCs)MAVm#
zZTvIN+Wl0&MDXYQF#3{qXA$(Ft>uw;>&qkE2f#n|`-?1D`gl8Gqj+=j77qvaV7#CH
z-mDV$x0TsBRP5B|jZ%mFQ}FDv4Rn5l$yl(|`Q7Oe;~u+P58Qvv*6uy)7U=EIpPM-5
zPv}(pkwc!Zx3$@4;Y){)0d<dX8|^S#=u9N1#!Vx@J)qswgx?jR4!O&CT@W}GJfGUE
z4Q9MWS@SIOIY`teP$UQ1mJR#9&>2tO5v#db<IZ<Yb^kEhpWg!*%fA#D9;b8{eCn6M
zH6ZvJ^TT=3`K$FPvTVNW9y(a)?QV{H%V)s-YA62Ycb2%n&Z(w~>4**wJ~;d2`ShTX
zw|GaKwMoD4ydIzqSN(;l&j_8}$q^eYga7tU+}Zvgxy<a(Wj@4%IQ0E!rz7q6;A<L}
zg80B#`15{wdpzex7_)Y8Zwuqk_mtwkJUrix@4hDN#CuD`)U6dZ*XQhqioV`O&c2aD
z=!_+&;~!eV`&<}zw*S%h5brU|ybhJww|PF*V{Er6Kg3wp?%_op>O*m1UDkuojePFZ
zG`-$PpE1`DpyrLMO}R7wCfu3t6Y<u%*o9DA_^4vW{X)OjIbuM$BP}1iJNZVj_8-wU
z=trvwx`f_HIW?{yjlO>|B7d%f_n+{8^32;HSdS9&hVGwt*sUYr-!%%`a~|XP)!GJa
zaPfvq9vz7{ms4}`U~qpQ+@r?~G$CeSuOWUWWPj8xrxoKsi%ALkMoN~Re@yeI<`b#&
zQakqh?^Bfdlv*~90r${a#kP)=j;z5r;Qua|_8~6ciamnnhpFd84r{fjgNVx%{UgRa
z5XnEKlf}cZ&elidYgP}Qi}Z0^o$C^y%G~k#_Qp8=1^BDy6=xQN&GlMeiCUK;x&F$^
zjA44c!M?-)Y1kOO--Oix|DE7=F!d?WE|oc-P;ICUYO&YsIA3qS68`^+SoxzLDfxQ-
z)V%&7_{XQaWqV^?8s0=b5Yxwfs(L2+kBDu`F4FIF*gxGfML8AK#-01US-npCiqalZ
z?M~DOWA<^ZR|~P;79^A!*A-C1sshAC6<~Z9P|a%vs7IcNOJh792S@Vc$sCItcXG)K
z1Fn?E#hswKujQD~WT#qpf3`ix0(EL{#By^?PeQ2&<H7Y@dq4MDpw|Mu7Kmhl{{gYD
Bh2#JL

literal 0
HcmV?d00001

diff --git a/frontendVue3/src/App.vue b/frontendVue3/src/App.vue
new file mode 100644
index 00000000..ef162909
--- /dev/null
+++ b/frontendVue3/src/App.vue
@@ -0,0 +1,72 @@
+<template>
+    <v-app>
+        <navbar></navbar>
+        <v-main style="position: relative">
+            <router-view />
+            <v-snackbar
+                location="bottom"
+                v-model="snackbar.show"
+                :color="snackbar.variant"
+                :multi-line="true"
+                :transition="
+                    breakpoints.smAndDown
+                        ? 'slide-y-transition'
+                        : 'slide-x-reverse-transition'
+                "
+                :timeout="snackbar.timeout"
+                absolute
+                :min-height="breakpoints.smAndDown ? '0' : ''"
+                :min-width="breakpoints.smAndDown ? '0' : ''"
+                :rounded="!!breakpoints.smAndDown"
+                variant="elevated"
+                style="z-index: 1005"
+            >
+                {{ snackbar.message }}
+                <template v-slot:actions>
+                    <v-btn variant="plain" @click="appStore.closeSnackbar()">
+                        &#10005;
+                    </v-btn>
+                </template>
+            </v-snackbar>
+        </v-main>
+        <TheFooter></TheFooter>
+    </v-app>
+</template>
+
+<script setup>
+import Navbar from '@/components/Navbar.vue';
+import TheFooter from '@/components/Footer.vue';
+import { useAppStore } from '@/store/app';
+import { storeToRefs } from 'pinia';
+import { useDisplay } from 'vuetify';
+
+const breakpoints = useDisplay();
+const appStore = useAppStore();
+
+const snackbar = storeToRefs(useAppStore()).snackbar;
+</script>
+
+<style>
+.mainView {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 30px;
+    padding-right: 30px;
+    max-width: 90% !important;
+}
+
+@media only screen and (max-width: 400px) {
+    .mainView {
+        margin-left: auto;
+        margin-right: auto;
+        padding-left: 10px;
+        padding-right: 10px;
+        max-width: 100% !important;
+    }
+}
+
+.scroll-snap-container {
+    height: 100%;
+    width: 100%;
+}
+</style>
diff --git a/frontendVue3/src/assets/logo.png b/frontendVue3/src/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5f23ae7bff64954cf3537377a9f99306baf083d
GIT binary patch
literal 11955
zcmd6Ni9eKI^#7gJGKPulg;G%xiD=PGd&*jhP(($RY!y;H&uF0{l@?o>HdMBj2_-WU
zNeh(_F{45yOO~<B%=7&2==1%4|An8|%XaUxoO|y3ywCfbJExr;*V7es6afHqyA5kL
z13-j-5`jDw{u+*Mn1H_&!ZvJ=1c0U{`zC<&Of5J_h}^t>6)1Q=?HBxq?7z}sB>)eS
zX_8$O02XYpTeH$Nn$X+k6gjP_RPeX^z|cl2Yy0C`%k3^z#7&pBl;8Ed>bUL7pLv7R
z6W014JxNhW@JjXCeXZg}#GXB2moGgZ_(`#Ou?&nUCg$zmsv3Xoj7bwQKX%vaiyIO?
z86DLj?XyWG9Ns%o7xRAn*ge<BrmgoL&K>^bgdgipfcE@<^A+f`+mR>sKJ-efbO9(E
zUaqO#{4M!gQ>Emm+h|>u3SJs1DO?hNToWIvqpIOS`jT%Uk7n0;wKs3);uG&)iMaiW
z42@3$1li}%73SD=>Gs3DkumeZ(hj})J_6P`bPG8mIUj{f#s@0AbH4E`#H@}=-la`W
z*u-6V5+J4|1lMME>4E(_7k=r-a@s6UON<Eh34<X=!-k#lZ{r_YC%jcMV)$8in#V@g
z-1yduKXo5c=`zD-ZbQS|GnkT3Z9{2q_w^C@cJE(rdq5eB`Kw|kkDgqvU;bR5`KRsp
zv09z-qw6MkV-LoiEgyCjcNQN1hS(QVZ14~Q@%)`RI|2-g>w$AHLHXEdyf4jQ(1c*F
zHX0VCGG13c_-7ZhVu;e1xZ~-O*zV`wu73WG?8he3+^K-fpOZbBGjhjX!#qkpY$}^2
z4DKV~SN+$Aj>^@wcz4v@ZyvOj2#vbRjlahsRjv5BL?s}SnD`cA&Y<(5bo6RrO`Jvx
znD!<=I9mzuY3JM~`gZl}NmlSWoZubDU0tboo)y#DPzA~P3Y5;^TRwUm8zx+<*<<eZ
z8}TyL1>Lup&B<r<HQ)v;9IeN@bJnX!Egt9mFh%AW_V1I3m`B7}&6{fr%VrP$jw09Z
z!&(F-6V<{sdQ<&gADqERs7YKg%v^TK=MtBhU%_+}XAB<pgS!G3XMDLK^_AW2IRzR&
z%heSbgwc8dzUl`eIa`AuGY1hSt*4_umEACS<--$;G5@zrd+|`0nH(|qQtLbBbDsM^
zsB6Cdi&I?IsCD~2K!{L@8O_FDe*%r-oNz8LD}BcY<Apg{4iP_9Q-1)C<Drr=uOPjg
zCv^0CAiME*9*yuRvAp*g^D9$%qQmTP5OTFqzckWrTiwLy0}8shKonK9H&B}7=?VSL
zWu4&P5w#UdlMSPVJdV~k<nOs(r!7(fkx$KMuf8nDPJxXLo5i|KHOh$|29}XQ7&5WE
zEOcV)r3&Ur75t;iKq$AC$IT-ta#qjmI%UaebONuiO3$j|)h0_nRVG}C73vp``yClu
zcBW43ZEHFf_2R1cv`zr}(~e!M;JG9zfpd0M*QQm+FOE)@!>5dj3P;M2pm*yn?)%cf
z*jta-^OmWv_5}lD61#!eu~1K9rlYlQ_q%3GH}RsGO}p3iEeCx6>e|ZecI;X;6&>VB
zykbrS%t6<Cm6(Yy$>FrbVSFgrVUEtVt>TR8qf{Wd+$-?>Wp`X>I{2#LbG~P}J-H+N
z;0nz?@he1Q{Kuw>g(h-=q2ku)A9~n*3%N=Fl1p2%Eb~4P_~C3;&>lBbxzzgTs1Qex
zq`Z%A?^Y*;;_JE0)|41Jb$vXMP`>b?bobG_f0sLcC$Yvg?K;_DdRPzky<ZZq82UZP
zLtFC6OYC`mhP=GW?8e7~Z-e&$;}w)Y>Yjke4!FGRLEZC_p=-#}d@k>7aa6%OS8+zy
zn>xzCrbsR?JYNZPdK;S}_0F_4-_Hpq+9<Yp;vAE9teD$~ecXMnML-S)!nFDO7AAjc
z0nUxY%hV)}T&VOjJ@LI$WM>F+aEHx0D$onB;5~u<TGvOkd54GvqS31RuijqUA+%i3
zfg>wypWanbFKNY&1vgk7*t?{kcTW<E@BDG+D&?oUVYf6Zn@i_Es6bf;zelQuZWSNX
z!#<Y?vl?5x{~F#G^;C~50W<g3iAN7c2&jj_Z`T3|b4CY~rYSl5P-IPC$vW_Uc(lJD
zc+(pXeNf8_@X%9UW59@vG{Kq24ow|ieK5UFTzE@lJ!J_vF#lJ8Vbg06Hgx87i4hoD
z>Nt+PUAcde2^Cz<5|&5#cei;2B5J8-OEgrc*Y@tsfPlItbJ5t(>);7UJuPnU*TcLc
zQhNR*4kP1F_8ooa9{)1c+iuHODte#&A!)wd#qtBU9}zft6b~Xhw{J|eqI|S&eQykY
zuo27dSOk{VAL<SD@+YB@J@<a8$*)n*T5fxIEV8IBGcWia9eWqsDo`3zLX~%iWR4=~
zj&i`Lc$)HwPo=t&hdlW%*G5eB*V%RJD|lP?={SJLZ?nf8ez|v((EAh(=8Xf{7eCmH
z4n$dx?K*ZZ2%%GON1+<<*fZhOmnld&cW?!;ITcGZC#c|6`wFDnTYUyXm9jv6_REyz
z=QK%x%S!y-;ho~O)O*qUN(!D>^X#KWItbVl4{@?n3A``TNL9G`s**Qn-Gsj6<$?0O
znVV=8JT+>=ruvd#ynUn7@{V^v7|342<^TLUP?+4(BB(YT9q_*V<ml_yn**-gm!4i<
zrVTQ)c38DG5Wjc6AL;J!R(r=~1_@G>wc^l##+^;FSJ8nomv2*=A+c%V>FpWlpU!Ky
zoELOoWUZhJERCmp-=X*F8Nnyo(}2xSD0w7(<V3Lw=Q3S#Keq^God6%SK8?;Ev#xyx
z^G_~i-S;tHeaEr;@2-Dq5v>0>;~pBYp=(obXy#QCE5-?M`NonC^pUh@_-k%~bVtg9
z3j~&0g!o2sD1Pp$Y>)B>b@$GZZ`5ag-^TOM{uQKzU4EJ?b$G!*565g3>vs17;nbiG
ztCi=y+WP%0+_-b=#5tm3n+TA5Ayl>&6;R0%78n@!J!2l^9airdia!&C*#0Fi0S(nP
zPyV~a@!~^@{Oj<aDkF1)kkAa%55}W;5BOAIWtaCC^I6s}hj!Q!GU*KY;t8W+H?#i&
z`Jjh5<Af3j?C^)n86}~M%8XDCPDI~ro>OyC<C_iMLA_=UPxGY?FOLHE%wlNGJSzH7
zBiB-R!mu+6ucKIP(Um-VK6HIdRieAghR&cxR50mq;b#c^(vj>hGa0#>@zRF6YnN{<
z9_xlao2Coq&l$2Ev)%}|Im`)lJTh9CMZ@TuU9=^S8YN!KkBH4K5co6mwjR8de-DN#
zXN4=4-Vuj*2(YA@qkpv>z}u?HNIg6A9u@ez(`GSpU+R~36du~s>$Gp6?it*`BUJvh
z$7FonU0ndvRiA=0e>SGloZI+b>A>|Q7b<?_KJ>mncss8+!y^v4)j<D;%d)k<c{2(`
zqgx)C=#1+~bp4c7D5)!99?P>xz7+wCgV<!^bI}i49O6*#A%6B4s}TqVHWnb2eP22~
zPy2G#ovq5?eg6GyCxd#YzTT{}$8?;Po*zDrH1-Px#ugygaVzw43xR(_<7W=yJL0`e
zQzAaH9lBmi;;C+012{L=yrsL?kH`X`%4r?<lUu@yWj{&;b4pqSjmg9L+HY1PmSh}F
z`(@LQTi%lcuWs+jN%i0uJ%sSxvO}yk<mpmfL|{>Lf{^bGDqxSnc@K`}*9>L_Z-Snf
z>$T_#mub?pR@Va9oc-7$uo)qtt4-@w8ZaH7+l33q+%|6(FJlux&KpsG{_rfYQVHy*
znb#cDJEyAHj_LYzvU)=h-Q=&8$X3gn)PyZ1Em`E52?Tz}b#(t<kwBhXEdAo;GP%e0
zyVf4EYQm~1i-3*YynFk76)B<kh{<uJ-}vaKnmhi9UW|9mM4vcUd*_TU4i){jg}?Iw
z#emUl(T??W2O>9}&AH4cz-A=^iO!jXZV4tFUS(QjRWMrDio84Hv^_8gY5XJ4xIX^`
zls`flCbfjPOL<FojiANWX{tb!V>M=d?h!D5F*T#J9%dCG6?8XdobvFYeNDr?Mm-nZ
z;qqvsQ44bOrG%U}E6VQ=J>flqA!XA*%y^ZCk3by57zwp?82&19qi6%AldfW2%|C!;
zTC|-MJ1o^7371{LeDK7GuuusYrybh>qoYC@I9|LWOPX|>=#68Aj`!-sbq5z~ppQ;y
zNp#hR|4SMiZT-ma-uY9TumZW5R{d_UrmkgqjZl!wkpuqGPQVk@IqD(_mJFJ#+>tn}
z-h?%@iQE*jfbZ2ibLbXh*7L?-WcWyPvCo@eR+#Y_L#Hel)0}AKsY!sa!~>Gr1OvOD
zEM9YG@!0xam0h)~l(D2Uz91~(jRr@#VAN@>P;bGQ^@g>b=^s4Qw!tmaMgux660%q6
zO|oy5(^uo{r*pywoQ_&HVTlRtt=K&S5@YTsd`MjQXXC7!+F)9xErAx^hC6M*o8nsZ
zg<16wb2oKBE@eUWLEI(9YyX*5dj`y2w&<U4eWwMZ49;clGBsCwn>d0vBn~sjPJdBL
zlE-G)f9Z%wh538VQv&}pG15eZyePZ}p`wQa@})aGkg10TR6ay-dB?5P+PXV_!d>)t
zd$*X&|KcpYfBLe+^9rW!p@Gn;rfBM#EpUT6fzX+j2^r|@B-oyB|6@E>Jnw?gf)hQ<
zcmIalH>ZPB#S~TfyaYP`+tjR4-o^oyT^7=2nSs+m<_Qm<*?k>#P#Cm+@(@32JTi;r
zlgE{N@ENOKYYQ%olAUSG)q3zMTWcs_*ZoKb?1fcSo33KS=(mjUwv9V1R<j?O9g|z7
zHOce2Qn)_s`Q__t7EBQM+CNm^eW`mCF~Tgz>*^?YL%XQ>Z;h?QjUu0TU#g%59b^#Z
z7Dj}*b!t$x%I9{Ge~1%Wul3~|S7d#T;A3p}g=qg`6d$KJi%D@Q?v*RURx5$kowkGq
zqSIJhKOPB<eij|ut;1!WnA-;<oQh6qAbS5O$C2^NKFU@2fmV+oWZ$Y@m6f%=h0-KH
zpykp?9H$RjL4!hl4zydlw2Rgcs1P9f+cEE#z`Uz5WACQKpJjLR_bP$N%^qUt)&`7`
z9Z)A`(n);saY8X==`ik}Qz~+k*n|nBa4kw)-fJx|hocdF0to+j4J5Z@9TP#FcEkK=
zJ7(kuQhnWNiHjLO^|0e!=Eon3ax7&ay)kpldOC?eb&sj}w^-r^yskhCxE@<N(SGe(
z)LrR}HH}>#vPKadD!OG>_wG$I+lWP2)`bh0nP742O=sV?g=BfBE9nO|nX8ldb89^~
zNsAa8K-l6ySuTxdxrmqPlK9&DcUVcaNbF#+*Jn=(1g&}?qHYdc&$pJWnnecpBP)1y
zSJ!r@|CM3J=ClSHxcFVD;`^7tnJv>sziy??QIU%~<JBA5vwqzU$J<B5Mq}{?X;{j#
z?j>*YiB$BA{k+lH7g<70OEB+)m-x{Yq5g|Cy@gBROfAc27MDdtKPx4EWt{XHs7oj_
zVFg4yvm202Ybyn@)5v|=0=zDJxC~dV;61uPs5frq6@OH7tp?_#Vv5#}P6hVL?+nf&
z_a)Ar|5XA+@~I)r{}nL5Ro|~*0Nh`%uIiTZj9Ag4T<JTA7-c)1z7AHM7I553#oJvb
zvRC#NT8KYxBHF4hY{0tsz&!pR^~zf?YN)~k1tKFw7xC&6`z)d0h!*H_g}kfkV|t#>
zpL@oM31x@A0^@pOi$EfqYb25+N$V+LPrFaQ2S1BMQ4Y>K(iNxH^v0J->yimRgyMF~
ziqAy3ZRQGGUdiola{Db&u>lpOoZLqHp~kmc0Jq)DA{dmd?+p!C0yM>ZjScbxvu-^T
zHL1NlM@I#T!CS<h(?~4(Max7}pn|8=wg_6+4TT`AFx8;AeBa{J1P;}@F!gQM1c{x8
zJAM2g^z)X4D;0I;N<W_@aOPCT5^t86n(M5a_#f=w6uB8v(ex9}GBeILQ1Si!WkzJY
z>(yMeeG>USmB881jn*(t9$sMm^>ba|Kh!4*y`O7=z$>25J;8fm^X>l%dd+rB)Aufz
zcnt-Gl^@7WyHC-%5aJSWp7z6dEN7&bH}*WryGUyus%IgUJ~Nqz6ig%%I0|+#o}8yF
z;S3VrMW$YoTf7~bL3F&(dyy8<G0&q=V?2F+zGd~t;0;*d3o75Nv~AW{lM)p@B?FAH
z>QVXn&)BiRLu(D=kdcmQAZxeX#bHX44+u!OPwCnwpKpAVD~j4Dol?OhpKkGf1fM$m
z=>A^MEvDwbBSBv9Z#uRe8vHPmB%}o*bUzS~+U4Oh-)o?MXwNk+Z`VNRR+JBkQ(mVE
z)E9Mxu-oN`ek(})&)Ab=yBoNRYgZ%k*ym&=RL-WKM^^%-8$J%2zUz^*&+`XR44)p)
z=NwZ4*KUcLl&Pr3B!3Qn<R{cx`E3_Jir9hHJBx$pB-W<=&-Wbu7H&Ealb8h(hpnji
z#s)0Cq7`X+D2+9-U1_2PJY4g>Jh$CF=cyCeru=`zIdY3oKi5sH_V^TmvsNaP`LZ(k
z(Go6`ybpTw8NBhz?WM`-bUSTH?D}6B>lWDh{fOgCx#9$_*}eQa_3;@3XAdM$#X$Cq
zNLT<Qw0P4><Z}%hu%~=bPoQ)8&g!9f>p!`XUbU9Bqb65+@Hl}(+GBcNFmO#v>)Pld
z*lLMG-hEeN_1Hg{(%H+?RRYsx>Q~h;Hcn&=(^v^FlHKCHtVE7;@XM>Hs|WQervoag
zOs9U;Xx7k_K-LyFemc>LwXC9Yw!&9KXU_;^_x`WK2$0i8HPTjadHWZF1Hm%Q+idW;
zTiU%;mlk+|5J0cs^}&g}JW7NU>(&_p%YPu$uX`z%r}1|nG>N;Uf~jH-q79a~wXdzy
z;3&Yh*^$=Zv+J(3VjgQjk?Hop&2fmH4;Wx=r#&VUGdQ9$BoL9mM8p1y`sJv=>Fd+L
z2{JKg@189oGKlurP)pRcE0_p;=&a%szP~q5R+Ot6bpnwc5PDt<NPVmR%9CKX!?Y+m
z;-JO!9JbW4-V3%yzKWVC5WHzvmH^q~CZtnAUFu^=hv2ZmK;{J>XL03n8%ojk224^3
z8wM7P4W?lWOLNP%Jyyb8#68M6V6jng1{s&l-k8)9?>FGbv$U>7&1Xn@G_pYY#pw$o
z+j+@aVEK<H;JB9u{Y}}_nm5UfErL5E>&f`j>V^EIFqxRBTw<i>3kIf+lHaZj@2yLi
zJ=S#R&YqQqxzd<K0^iTB1=41E29Q;bcdXA&r{LQtZ5?97P<5d-xgFl<{&%iVVKecu
zhP=JHHNmUbY3e)`>5Q?aCCY@rxL<0LAzc#Mea4jKRAMBY9}9`6F+G{w28rP^SA@1?
z;m|_2Mxy70?yo&}JnOsHh4vP@KlM^OkWAog%Wn1>6!kNyfU^JjzFdl<-=sLdDe9&x
z6Ygz&f`r~N8qg!5sv$77Zx%hfvAo~A=YNE`P;M2<g_SH@Q3-5>V&$%T7SlDhHH&M@
zW?tDwK5KGna7Q3=*c=#Ny!~!J!E!nkwgcK1FLl!VUWV`nMBW*$O2yK-F94_JoynX>
zF_9*r4&6W|#mb&XCbeYw+mLhTG+>W+0q4EZPAo$%%gUOl^D8J{dPjlF6u2)22VsEx
zsstSS6fVm&3qW@L8iL67Y!pA~BK~xmz?$Jk3x<W^w`l-sa0{3O>YOqOMY(^zKl>`m
znL<K0mnMa_Wy=Ibepk7;P_e918=So%%F%>V1sd*09ty7LjAIIX3Z5&yacDQt@R?}9
zhJ8W({JEjDJS)b}9)@!xc8Ln7W6mk@zsh63ssX3DNW;A+gk8Rk@QyQ{!pInSzHC|l
zX7P}gI=^&#hMHu{IRdK`f+{7w?9capc{j26?iclws(#024`}w_F?;UXDPVJ70Zt|)
z)+dsw&Sx7c9|35<+$(gx7Zf?gh*S#@2OzsXEAZe%X#<mt2CN=3{!ooPc9KmnU>y8R
zJi3$y&0gWH@vd767q(X$?A`lGl5HTb1lU^b8YN){^*MC(zBEKyV;S)$Jf*f6i9?o#
zQTd7X`0Hy!v2h0GfIQ3YP4WAada32X0IKu6*<(3Wb$*(&m_{S9ShcZ4jXcW4LxPr8
z=?ukEVb+uwHzBhTfAqR{P6e+B-rm*d+4&$dZ9Zpc2J2T0K06LM45ifCNnFV*l2|Bp
z+&8}Kz+tWPmq}bMFKK;W2XCG;ThZrW=BWN0DhlW%_A`r|&i&RvMLla2zs^!wL2%{5
zTy76nvGL=0G1zgGX#B6%<A`#U)%k%kwLz=`jNHNN=#n7z4y(zKxhcw-s*Nf_vEf|;
zeYZH&H0)RC?W0vjG+0V*e`Hu6uPEGZ5s2*a1M=?MX_?<cg$ovgI<;%X((rcPW-_R|
z(y9_8R?#J~gfLW|ysWV|iYleCJwk}i;?=Dsl!5sT*i1fPuq%8-t;AME;!~kMm-#qJ
zQTQuYS_SunIMhIFy+_n(<MOVvjC8;!?JwCPO*tyM0p{1sBz6dy@a8|w;e3Y9KXBS=
zQK-@lH4<x9t%p!)l>B%Kx#53A2eVTPWOGECYE(2~R`<*2A#N?i`B^D@VaEqX$LaA6
zoU1gD?SNC=U?$$J1!it;B!+NV92#Nq7qYXi<d!H$KNMFh6~dq4yFkKQ*h%oVVl=y|
z@sFPQH?JqajcVnws(6CIs?vOssBMiJgcJ2{t`fFA=-7fXY0r9+a8{54wl)D?0b^zP
z>AFl&MgURP2`xqpBfL3!x@dSd4~g32$(Rn8nWi{OZfGML2O%CZrK}0lv?fDxR+GfK
zeGk&hUGc-mUamV$JY>Oil1=5Gl_^#;*vXrs+em!04=Hb4Mwl$-(tbG-Lm3j9Tqu6)
z;Vip}xPXOV&0DDc#(xzLJm0)UnHALA|8WB96hem>x6YM9???EzsX1>_udmH+7iP^K
z(^S;~uVfP-r-`U(JEceodwy$p?}J-H!94@5U~mq$*VA6DgbFOIjFPG)?`0{UJ5q)Z
z*6YV19lHR-O&lB1UG{#ta$preH(T7%C=p)Z$HLU@d(1?hMn_e-%xQjrb+^pOr&i@u
z43o6n8Y<dt1+*70TA5sC8A<@&&qlJ-+-Y9v{=ocWla|E9MNCr_;Ik)%xK9EBn5DYX
zGOgr<amfF6<Ku)cR{+=x0ft&&AkL1<-!2FII#<KqK*km^ZQECMzHK0)^$MVB7l*4%
z(PdMLe#d~8Af&p6vNH8O;^})i;f5$)4X*0Nz;#q}+t^ko@@<iv+1lrr_0c#a^#lQ^
z(fbv~o@%&v1`5CRBAy|=b?MVr7X8_DP!N1)-MU_tPv*eq=3ft=%hUM$8j?$Ho^*<Y
z*81_x%NqBXnpS4^F2Hv!(1@NUf54xRdD!4QZ2p`SFVlouT6Y~;JM+@fBT+G%(7Dir
zdmmzn+0*53mx@O7a}<iDRR%ApfXmE02{%P2pHjZG(?6Gn?aP;*=Gv}o{yK&Kfex~r
zdR6@4E7DGJ`N!>aQCQJgja}^tp6|16%3>go-B6^0%zf^(BR}KN?@Lff)Y_8P=2FLA
zGvx=@KtPD&fXZcaz`6L{LrC)khEnhHkSA*m--I9!io&OZOLykX9*f_o1)S}mJQ?({
zl>4Vo!cYHH0-BQVz4}`h0?tEEHwV1)K(rHj*@0WZ3`D|DcPpWZLjAoJ08J|!w0;=#
zeuHTI;ZLtcda`65o{)=Yz438CwY3O)hrO{61?9MG%ZA(;^w_@_o0|mZ2huQ1yh#b9
z!j|z{`|p*!HN9plE)3&$rMvW$K*B0*7_pkyjOU>;O&%X(4h)pZ__wLYDCWz&y2_BZ
z@dQu-n}i8NnBUZjR-UX!m_{PNnhWK~XgSuKaZSDv>iQxE6`V+F@h&6k1DU*V2P6=;
zwGorY)|&jGqfks#-qZq&`SAEDE}EhP9yjVicAE}|W=)<pk;4_odIjzsPnZpH1hDI-
zNRx{;;geklVC4f?VGBZ+N2uUiS3VBrL`?$Ks$&5lpB%zEe&Ah#Q&BX|g<fe=X9lt1
z1RcD15rc;j%ZN4)y4b+V7qHA1w6~W+jP2S<u<unFfdORx@kEP$oD$dz^V^9?BAHXx
zn=I6SNdc9=@n=FoR%48KJ<Nric5_)>zkcUoJ0g5&06ZpOpf8V(daD~aR4M|GO#>=P
zyGY>kxppkX2^i(}<1$`~@kCD*5zze&nEA}x{Wuw~x1@sHk$=g$GS|luyzQOCWm+Z?
zK;Z0Z$wt&=*AZgP#aX{-_2w49`E-lEW0(r=iYHqJA^|iKXn?V07pye`ArU~&0-QQ{
zHn<gaA&@~xdgK=s4|tNcbu!DQvhXSVZ2ZUjaa)4N3pffBYy8|xp|Ttwq6D1(on{ad
zKkdYCiQ<*b0W0~0P=C&ra;#3)E+q$OlYnbU*}r~HDr-mqg~c>WP74U1cf{cR3g$`e
zbiN*!c>snI2A}Y$Y<Td4zT#|O`20mmU;y@PGOHGto_5T38c^Bc3s6DcmnlNar99jp
z`q_#KqR$RtE+?yXLDFSdVBZRY_h`a<W;?9CvTaQoR8Ma_i3bu1VCPLy{Kl!-5T_NI
z>p-1Ss5o{$U;9sI(;McnxfC8zH<AZ{E*R_170G4VwT?oCF`z&KWf6Zx@2vunT>H;P
zAP^aVzAGF2>~>L|x0{$*^<0|My+#2JE6c8|=Y<<o4<1+b|9F6KUREZk2pGf@R~Ll-
z=}WlWL$tr(9kc1j=l%rZ7fk%djXa>F3!=}Mg7=)=r1Njk24>ky0L-Mnc<s&VL8Y_l
zDW&neGc?p5uj}VMG(qE`&+>EPBLp5x7(R(tWFQbOg6n@nAv*Z#E1Iuci!)_qz~o@>
zuPx#J+5W`DL7d9}6P5;1Z4Ivtfko1qlc6P{_;m!2npFJVCeaWy?ItAlx<eGks1&hV
ze${rn_e{QG|3bhzS;1ey;P}|~V@9yt<-izpjULR<jol_sUbP%{*4mlFJ^<CJyKa~4
z;q&8bF@8t=?**Bb*SFjS$M+bRcb?#<j!UG1Ny@c^A(k5%b96NP@0)uDOUFkG6Uq*`
zEPok;JIB+(@C^+uGbbMY3}%g5h@|O(><b&WnDKDW3s9Zc!#uO`0VN@+@D-lzJN8`u
zG7P584=6QfoCsv1-?z@cyatQ|58E0dWDUv0_;_735!&GgP>%+p;kRA5fPzPh<M%dz
z8||G*ZPOn_>|o3n|E4@}J7%DFLnJrS3=BXpVO4kQIOHD&5e8UyAbZ<xPsW1630y|!
zGazp;5+A6@lc}|jWE;SM98QMK9ETSn>=}c<CHU9<s*=^lkc5=nX!DP~Ca?VaQ;b}h
zW#^5uAQNg8Xry|ISqu#)WdPw=4~LA!yz&R{Yzc&L0p6zH_6D|oEtP;g16J5$5ffPs
zLm9A{1u1jMJ=mUAV(SZVhe^phIlA(&$o_BxktAG+XSL|Bg8AK`lx4tWb$+en_4LaY
zVcth%)h{UQU$NlWcJ*98vz@Bq3Eht~-iz1Q!_@{?7bv*?o)9y;rG^LKThnRe%{140
zt^If`ymu)TtU*oDr3Kj4>nR1ZU_{P{h8JCbCOZsU@Z{4c97<GuU&!3X&a{R*l_V63
z(gX?#+=K@;7b8}26!*2XjpL=#^To)^I30tV5&Mpgj#h<E1QA2OxS1t9A0+*PNp#Ig
zI=JbpR7{yDxIY1P=u5a<mm3<nEX^Louoc>&3+<>Wm?A&yy1ogY(^#av>Hu``bT`_M
z>wtMM1%sVTn}xt&qf=I`h9|%e3`n6fZbD}m(?e;ydwVjjSc3&)uUeVDYv~M^XJrqb
z8A5gQ)NQ$B=sxq325js#Kwm^mQ~q(bF&XCuqYM}-Yx3bS^CsyVQZE%aAb4Nx6EMXO
z0M$N)pI&cX;i?i6{M1z-TQ6XwcQWb#6>xsQ^C`15j+$vB{;;yM)0Dsmzy@x)nqrUR
zrXIviyv%*kkv;-cE@LfNVQ6rq6HD&OmDZ)0HLNm)usy=3<x-yH=lA2MQ+0_#NM(F^
zH`?P>21O3NNAT`4#Ag}__MX2i3S{T+yMg)V+j1aRLDERnZdc=La3~>p_#_LGjKVd6
zc~$2~+p8+G`*GDj1iYDpEo=8Nx}~HoMFfz&@Q_1&UUn0H`j-NFS_`0aVSSWKS)9``
zk){6Sj!4e_6#$vAPT!J_VOeK7@MXfO(3rVjZ3$I5K=lVb;0XqEm<=SuFlv<StT)}t
z6MvH{CHO-hy_aqOLrU(JlpfeHVOcc*_L=`UFz%$4JIoVut}kJ5C7QBAbUg4aV$wZ$
z*Swn=?kUy35m}t&o+H2y1ne+ml%!^Vgkgq$F$Z8#nC#Hf-Cm8r3W|(F_=(VNZ5Nss
z>M3o)rOZtZPiKR@Fhji!i1rkcD&FeEh@I?V{poWE8nDELmbv3tr|E^mi$DX0E_pxz
zUF%H4_F9F4;B>)M5V;FXwr=z99NKm{b}Xm+_KN?Kp1CF!_z;{_I#;myfrCxuCI@ed
z<mN++y7SFpC#LAk(oeWd>iio!4?E(#-EqHu+e*zQ)iI#KCu_L2YXtmB_qn&U2gw{&
zX*f;*xr9-2W<m9LWYnf#KUa<foKq^$O7@(4e}{Q%l(<aJ93{YVxGw3czOGJWfB)@?
zXRN4Ta#q06r0cdRdR)Hd=f_wbboq!c1fnaIxW!Rk;*s7MIUKs5`J-1qS2KzL=p|+4
z;*zmFTW9)vKQ|E7s_b3~-*1W1K|MK;eP^jmXrX(dbLkuno5ukYf||wf)!OhSelrEc
zl3_e92cO;OoKMz)j<vkqOx#_Sg9eb;XT7o2y($5!Bv5Y<<-~f-<yTEU>eNE`s54Js
ziP6cN47vLGfhddi-|nj_{HGz8xQIy}@Dx5^t(PZwRx^scxu(d{h5M;d;=xh>az(4;
zGyd_++gGv^?U#RfYV`|Ybj_}AmRm?BYL-gkh5Ge+vXKIffQtj6w9Hs(R;xoC!itqW
zqSV9Z@1{97B6{%g-^iDa!NDsafDR442@gXDI#@#m_>SIwpLbzN7WFfsadNBjDP3;u
z>D?3F5Ug^|09=y~qn*zlS}r-OzpCpL2$&9UW)D7L1s#9dxxf5AvZP=Cry?A?0FyEE
zwudl}gidC>`svUn!vzd2SJSX+z<DqTd5^OU`Z9jiT}lfiyxZM-$CG!9N4Fg&a-g<h
z#ly<L%4L7o2;vJzw!o2BwJgqs9Up>E5%_2Rtk~|YI1eZUzyOc-F?T*fx-J$mD<_!h
zw~l=$oPcH706#_WwfWJ_MU2$C10q<f@imnIY6RhNz1G8L<Pp9o5J8!cr<^Xa`L16S
z*!!jZ3&1^?oQ0ZwM6f(^l8*(cO>5W^vD=!R&)ho&wJ|vA51nv*;W`(CqHhzBN`?AV
zz+V&?$iCb(nFR+_NI*FISy!w<QQ!p3074@;zq(4pU<kX8D)u0<=tOg5uPu!wmbDRG
zJ#qiLcEx1$s%&iBi<b8gi;|tB5fB#=d3jWfU)1_MFU{m1h<MaL1PV*Sbw3h_u6tz4
zIyu6VWk5cpLbMwmUvb+Te!ky{XUNW$M#*Rsd>~ylxlh5yPzq_I9@fat{0tA__MXW^
zOgi8Lz@;!Q|Jzmjr3b1fnExVj9>n{`5)YsK%gT*}mquXnBRz#fXa3+5)rZ_h$<1zN
znNKhQ<YX3%eb%-8fo##|etT);X)Wka3uuZ31m2zFEMWtIKdgWeCg9zQwy}--O^dwn
zobEZ&yHIy<)JTAHo<@EG%d^5AnG&N2@r+O$b^J;J#)tk>K$deIX5-Hg=C8W2b|yzl
z7qAxjHQnCz=>^h&fi}3fD#*(^1(X)Mcw7s%VB~&Q1CZM!)ZmX`M$@nq_fNg-H9!Ln
z8h7_81l-dIX#0X2!BfyxF!PW(cRhqBMj$K<7!X>(%hdT}x|4in(Ld+2&7DbP;=hzE
zXlS}k6@8oippdt4!VCr{5tg^|2@6NsG@^Z_f)R%k05%T*`SueJ;m3%-uWD;}J`>_7
zw<i>qISe^rGj}bC9rFOwUpt^857EKUa-(^TT}M9*c<;A{4uWk6KpY;v8~pA$C9Dl;
z0yY<C+kMmo6|!;5GSjev`kgCOq5PLSaaPBGQS?Ul*)reGiTQY%q#wJs;qZIuY8adR
zW&l=Z^oDUBPDBk4m>si$Nz%X_E{!ik#^umnao2C}_hPwKFnOI=a2FQ6@Dnt0P_(ng
zpppEo`IKWvhoHbPfK6Z)88+d^W-sd%_$4djuO~|t)&RUr9s=W7%XVzPl=m1m@X4&H
zaBzbR8luOs#KAZC#=M%ol#x5N?3LgtWILC%&9vosh+S2l0vZ5uFeRMJGVx>c2Y(7e
zp(AI)LTXLdmq(gG5JOE+AF<&1AzGu<uVB+cEEy0)nb|_FhHvoNDL8uM7ZbxCfP{}r
p2n-{?roo}YvKiq2o3Gs0xLjiX4DX6^d%DahyS0vM3Rd~V{XfVkCh7nH

literal 0
HcmV?d00001

diff --git a/frontendVue3/src/assets/logo.svg b/frontendVue3/src/assets/logo.svg
new file mode 100644
index 00000000..d57771c6
--- /dev/null
+++ b/frontendVue3/src/assets/logo.svg
@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>
diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
new file mode 100644
index 00000000..f629931a
--- /dev/null
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -0,0 +1,332 @@
+<template>
+    <div>
+        <v-card variant="elevated" rounded class="pa-2">
+            <v-data-table
+                :loading="props.loading"
+                :headers="headers"
+                :items="items"
+                items-per-page="5"
+                :search="props.search"
+                @click:row="handleClick"
+            >
+                <template v-slot:top>
+                    <v-toolbar flat style="background-color: transparent">
+                        <v-toolbar-title class="hidden-sm-and-down">
+                            {{ headline }}
+                        </v-toolbar-title>
+                        <v-divider
+                            class="mx-4 hidden-sm-and-down"
+                            inset
+                            vertical
+                        ></v-divider>
+                        <v-spacer class="hidden-sm-and-down"></v-spacer>
+                        <v-text-field
+                            id="feature-model-search"
+                            v-model="search"
+                            append-inner-icon="mdi-magnify"
+                            hide-details
+                            label="Search"
+                            single-line
+                            variant="filled"
+                            clear-icon="mdi-download"
+                            density="comfortable"
+                        >
+                        </v-text-field>
+                        <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 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-dialog v-model="dialogDelete" max-width="400px">
+                            <v-card>
+                                <v-card-title
+                                    class="text-h5"
+                                    style="word-break: break-word"
+                                >
+                                    Are you sure you want to delete this feature
+                                    model?
+                                </v-card-title>
+                                <v-card-actions>
+                                    <v-spacer></v-spacer>
+                                    <v-btn
+                                        color="primary"
+                                        text
+                                        @click="closeDelete"
+                                        >Cancel
+                                    </v-btn>
+                                    <v-spacer></v-spacer>
+                                    <v-btn
+                                        :loading="removeLoading"
+                                        color="primary"
+                                        text
+                                        @click="deleteItemConfirm"
+                                    >
+                                        Delete
+                                    </v-btn>
+                                    <v-spacer></v-spacer>
+                                </v-card-actions>
+                            </v-card>
+                        </v-dialog>
+                        <!--        <v-dialog v-if="editedItem.analysis" v-model="dialogAnalysis" max-width="80%">
+                    <v-card>
+                      <v-card-title class="text-h5">
+                        Order
+                      </v-card-title>
+                      <v-spacer></v-spacer>
+                      <div class="analysis-width" style="word-break: break-all">
+                        {{ editedItem.analysis.order }}
+                      </div>
+                      <v-spacer></v-spacer>
+                      <v-divider></v-divider>
+                      <v-card-title class="text-h5">
+                        Report
+                      </v-card-title>
+                      <v-spacer></v-spacer>
+                      <div class="analysis-width" style="word-break: break-all">
+                        {{ editedItem.analysis.report }}
+                      </div>
+                      <v-spacer></v-spacer>
+                    </v-card>
+                  </v-dialog>-->
+                    </v-toolbar>
+                </template>
+                <template v-slot:item.actions="{ item }">
+                    <v-btn
+                        class="mr-2"
+                        color="primary"
+                        variant="tonal"
+                        icon="mdi-eye"
+                        size="small"
+                        :to="'/feature-model/' + item.id"
+                    >
+                    </v-btn>
+                    <v-btn
+                        :disabled="item.owner === false"
+                        class="mr-2"
+                        color="error"
+                        variant="tonal"
+                        icon="mdi-delete"
+                        size="small"
+                        @click.stop="deleteItem(item)"
+                    >
+                    </v-btn>
+                    <v-btn
+                        class="mr-2"
+                        color="success"
+                        variant="tonal"
+                        size="small"
+                        icon="mdi-play"
+                    >
+                    </v-btn>
+                    <!-- <v-btn small rounded color="error" class="mr-2"> <v-icon>mdi-delete</v-icon></v-btn> -->
+                </template>
+                <template v-slot:item.id="{ item }">
+                    {{ item.value }}
+                </template>
+                <template v-slot:no-data> {{ noDataText }} </template>
+                <template v-slot:item.tags="{ item }">
+                    <div v-if="item.columns.tags.length <= 2">
+                        <v-chip
+                            v-for="(tag, index) in item.columns.tags"
+                            :key="index"
+                            class="ma-1"
+                        >
+                            {{ tag.label }}
+                        </v-chip>
+                    </div>
+                    <div v-else>
+                        <v-chip class="ma-1">
+                            {{ item.columns.tags[0].label }}
+                        </v-chip>
+                        <v-chip class="ma-1">
+                            {{ item.columns.tags[1].label }}
+                        </v-chip>
+                        <span class="ma-1"
+                            >+ {{ item.columns.tags.length - 2 }}</span
+                        >
+                    </div>
+                </template>
+                <template v-slot:item.owner="{ item }">
+                    <v-icon v-if="item.raw.owner" color="success">
+                        mdi-check</v-icon
+                    >
+
+                    <v-icon v-else color="error"> mdi-cancel</v-icon>
+                </template>
+                <template v-slot:item.family="{ item }">
+                    {{ item.raw.family.label }} ({{ item.raw.version }})
+                </template>
+                <template v-slot:item.uploaded="{ item }">
+                    {{ new Date(item.raw.uploaded_at).toLocaleString('en-US') }}
+                </template>
+            </v-data-table>
+        </v-card>
+        <v-dialog v-model="createDialog" width="auto">
+            <file-create @close="createDialog = !createDialog"></file-create>
+        </v-dialog>
+    </div>
+</template>
+
+<script setup>
+import FileCreate from '@/components/upload_cards/FileCreate.vue';
+import { useAuthStore } from '@/store/auth';
+import { computed, ref } from 'vue';
+
+const authStore = useAuthStore();
+
+const props = defineProps({
+    headline: {
+        type: String,
+        required: false,
+        default: 'All Feature Models',
+    },
+    items: {
+        type: Array,
+        required: true,
+    },
+    loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    noDataText: {
+        type: String,
+        required: false,
+        default: 'No feature models yet',
+    },
+    addable: {
+        type: Boolean,
+        required: false,
+        default: true,
+    },
+});
+
+const headers = [
+    /*{
+        title: 'ID',
+        align: 'start',
+        sortable: false,
+        key: 'id',
+    },*/
+    { title: 'Label', key: 'label' },
+    /*{ text: 'Description', value: 'description' },*/
+    /*{ title: 'License', key: 'license.label' },*/
+    { title: 'Tags', key: 'tags' },
+    { title: 'Uploaded on', key: 'uploaded' },
+    { title: 'Owner', key: 'owner' },
+    { title: 'Family (Version)', key: 'family' },
+    {
+        title: 'Actions',
+        align: 'center',
+        key: 'actions',
+        sortable: false,
+    },
+];
+const search = '';
+const removeLoading = false;
+const dialog = false;
+const createDialog = ref(false);
+const dialogDelete = false;
+const dialogAnalysis = false;
+
+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;
+
+    this.closeDelete();
+}
+function close() {
+    this.dialog = 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;
+  });*/
+}
+function deleteItem(item) {
+    this.editedIndex = this.items.indexOf(item);
+    this.editedItem = Object.assign({}, item);
+    this.dialogDelete = true;
+}
+function handleClick(value) {
+    /*this.$router.push({
+    name: 'FileDetail',
+    params: { id: value.id, slug: value.slug },
+  });*/
+}
+function setHovered() {}
+</script>
+
+<style>
+.highlighted {
+    background-color: green;
+    height: 100%;
+    width: 3px;
+    display: inline-block;
+}
+</style>
diff --git a/frontendVue3/src/components/Footer.vue b/frontendVue3/src/components/Footer.vue
new file mode 100644
index 00000000..16cdea46
--- /dev/null
+++ b/frontendVue3/src/components/Footer.vue
@@ -0,0 +1,27 @@
+<template>
+    <v-footer
+        class="mt-8 d-flex py-4 h-auto"
+        style="flex: initial"
+        :class="smAndDown ? 'flex-column' : 'justify-space-between'"
+        absolute
+        border="t"
+    >
+        <span> © variability.dev, Ulm University </span>
+        <span>Made with &#10084; in Institutspool</span>
+        <v-btn
+            variant="text"
+            to="/dsgvo"
+            color="primary"
+            prepend-icon="mdi-scale-balance"
+            size="small"
+        >
+            Imprint & Privacy
+        </v-btn>
+    </v-footer>
+</template>
+
+<script setup>
+import { useDisplay } from 'vuetify';
+
+const { smAndDown } = useDisplay();
+</script>
diff --git a/frontendVue3/src/components/GithubButton.vue b/frontendVue3/src/components/GithubButton.vue
new file mode 100644
index 00000000..bbbab07a
--- /dev/null
+++ b/frontendVue3/src/components/GithubButton.vue
@@ -0,0 +1,22 @@
+<template>
+    <v-btn
+        block
+        dark
+        @click="loginWithGithub"
+        variant="outlined"
+        prepend-icon="mdi-github"
+    >
+        Sign in with GitHub
+    </v-btn>
+</template>
+
+<script setup>
+import { useAuthStore } from '@/store/auth';
+
+const authStore = useAuthStore();
+
+async function loginWithGithub() {
+    const url = await authStore.loginWithGithubRedirect();
+    window.open(url, '_self');
+}
+</script>
diff --git a/frontendVue3/src/components/LoginDiv.vue b/frontendVue3/src/components/LoginDiv.vue
new file mode 100644
index 00000000..b84c7761
--- /dev/null
+++ b/frontendVue3/src/components/LoginDiv.vue
@@ -0,0 +1,128 @@
+<template>
+    <div style="min-width: 300px; height: max-content">
+        <github-button></github-button>
+        <div class="mt-4 d-flex justify-center align-center">
+            <v-divider></v-divider>
+            <span class="mx-2">OR</span>
+            <v-divider></v-divider>
+        </div>
+        <v-form
+            class="mt-4"
+            ref="form"
+            validate-on="submit"
+            @submit.prevent="onSubmit"
+        >
+            <v-text-field
+                v-model="email"
+                :rules="emailRules"
+                label="E-mail"
+                required
+                density="comfortable"
+            ></v-text-field>
+
+            <v-text-field
+                v-model="password"
+                :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
+                :rules="passwordRules"
+                :type="show1 ? 'text' : 'password'"
+                counter
+                hint="At least 8 characters"
+                label="Password"
+                name="input-10-1"
+                density="comfortable"
+                @click:append="show1 = !show1"
+            >
+            </v-text-field>
+
+            <v-btn
+                :loading="loading"
+                class="mt-2 float-right"
+                color="primary"
+                type="submit"
+            >
+                Login
+            </v-btn>
+        </v-form>
+    </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import AuthService from '@/services/auth.service';
+import { useAuthStore } from '@/store/auth';
+import { useAppStore } from '@/store/app';
+import { useRouter, useRoute } from 'vue-router';
+import { useFileStore } from '@/store/file';
+import GithubButton from '@/components/GithubButton.vue';
+
+const fileStore = useFileStore();
+let email = ref('');
+let password = ref('');
+let loading = ref(false);
+
+const authStore = useAuthStore();
+const appStore = useAppStore();
+const router = useRouter();
+const route = useRoute();
+
+const valid = ref(false);
+const emailRules = [
+    (v) => v.length > 0,
+    (v) => !!v || 'E-mail is required',
+    (v) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
+];
+const passwordRules = [
+    (v) => !!v || 'Required.',
+    (v) => v.length >= 8 || 'Min 8 characters',
+    /* emailMatch: () => (`The email and password you entered don't match`), */
+];
+const show1 = ref(false);
+const prevRoute = '/';
+
+const emit = defineEmits(['onClickedLogin']);
+
+/*const isReady = computed(() => {
+    return this.valid.value && this.email !== '' && this.password !== '';
+});*/
+
+function onSubmit(e) {
+    if (email.value !== '' && password.value !== '') {
+        loading.value = true;
+
+        AuthService.login(email.value, password.value).then(
+            () => {
+                authStore.login();
+                if (route.path !== '/') {
+                    router.push('/');
+                }
+                fileStore.fetchConfirmedFeatureModels();
+                emit('onClickedLogin');
+                loading.value = false;
+            },
+            (error) => {
+                console.log(error.response.data);
+                appStore.updateSnackbar(
+                    'Login not successful: ' + error.response.data.detail,
+                    'error',
+                    5000,
+                    true
+                );
+                emit('onClickedLogin');
+                loading.value = false;
+            }
+        );
+    }
+}
+
+/*function mounted() {
+  if (this.$store.state.loggedIn && this.$store.state.currentUser) {
+    this.$store.commit('updateSnackbar', {
+      message: 'User is already logged in',
+      variant: 'info',
+      timeout: 5000,
+      show: true,
+    });
+    this.$router.push('/');
+  }
+},*/
+</script>
diff --git a/frontendVue3/src/components/Navbar.vue b/frontendVue3/src/components/Navbar.vue
new file mode 100644
index 00000000..09d58f73
--- /dev/null
+++ b/frontendVue3/src/components/Navbar.vue
@@ -0,0 +1,299 @@
+<template>
+    <v-app-bar app>
+        <v-app-bar-title style="flex: initial">
+            <v-avatar class="hidden-xs-only mr-3">
+                <v-img
+                    :src="
+                        theme.global.current.value.dark
+                            ? 'ddueruem_logo_dark.svg'
+                            : 'ddueruem_logo.svg'
+                    "
+                    alt="logo"
+                />
+            </v-avatar>
+            variability.dev
+        </v-app-bar-title>
+        <div class="hidden-sm-and-down ml-5">
+            <v-btn
+                v-if="appStore.isOnline"
+                class="mx-1"
+                to="/"
+                prepend-icon="mdi-home"
+            >
+                Home
+            </v-btn>
+            <v-btn
+                v-if="authStore.loggedIn && appStore.isOnline"
+                class="mx-1"
+                to="/profile"
+                prepend-icon="mdi-account"
+            >
+                Profile
+            </v-btn>
+            <v-btn
+                v-if="authStore.loggedIn || !appStore.isOnline"
+                class="mx-1"
+                to="/models"
+                prepend-icon="mdi-file"
+            >
+                Models
+            </v-btn>
+            <!--            <v-btn
+                v-if="authStore.loggedIn && appStore.isOnline"
+                class="mx-1"
+                to="/tags"
+                prepend-icon="mdi-tag"
+            >
+                Tags
+            </v-btn>-->
+            <v-btn
+                v-if="authStore.loggedIn && appStore.isOnline"
+                class="mx-1"
+                to="/histories"
+                prepend-icon="mdi-human-male-female-child"
+            >
+                Histories
+            </v-btn>
+        </div>
+        <v-spacer></v-spacer>
+        <div class="hidden-md-and-up">
+            <v-btn
+                :icon="
+                    theme.global.current.value.dark
+                        ? 'mdi-brightness-7'
+                        : 'mdi-brightness-4'
+                "
+                @click="toggleTheme"
+            >
+            </v-btn>
+            <v-btn icon v-fullscreen>
+                <v-icon> mdi-fullscreen</v-icon>
+            </v-btn>
+            <v-btn
+                class="drawer-button"
+                icon="mdi-menu"
+                @click.stop="drawer = !drawer"
+            ></v-btn>
+        </div>
+        <div class="hidden-sm-and-down">
+            <!-- TODO show button if logged-in user is admin -->
+            <v-btn
+                v-if="authStore.loggedIn && appStore.isOnline && isAdmin"
+                class="mx-1"
+                prepend-icon="mdi-security"
+                to="/admin"
+            >
+                <div class="hidden-md-and-down">Admin</div>
+            </v-btn>
+            <v-btn
+                v-if="!authStore.loggedIn && appStore.isOnline"
+                to="/register"
+                prepend-icon="mdi-account-plus"
+            >
+                Register
+            </v-btn>
+            <v-menu
+                v-model="loginMenu"
+                :close-on-content-click="false"
+                location="bottom"
+            >
+                <template v-slot:activator="{ props }">
+                    <v-btn
+                        v-if="!authStore.loggedIn && appStore.isOnline"
+                        v-bind="props"
+                        prepend-icon="mdi-login-variant"
+                    >
+                        Login
+                    </v-btn>
+                </template>
+
+                <v-card elevation="16">
+                    <v-card-title>Login</v-card-title>
+                    <v-card-text style="overflow: hidden">
+                        <login-div
+                            @onClickedLogin="loginMenu = false"
+                        ></login-div>
+                    </v-card-text>
+                </v-card>
+            </v-menu>
+
+            <v-btn
+                v-if="authStore.loggedIn && appStore.isOnline"
+                :text="!breakpoints.mdAndDown"
+                prepend-icon="mdi-logout-variant"
+                @click="logoutAndRedirect()"
+            >
+                <div class="hidden-md-and-down">Logout</div>
+            </v-btn>
+            <!--				<v-divider class="mx-5" vertical></v-divider>-->
+            <v-btn
+                class="mx-3 theme-button"
+                :icon="
+                    theme.global.current.value.dark
+                        ? 'mdi-brightness-7'
+                        : 'mdi-brightness-4'
+                "
+                @click="toggleTheme"
+            >
+            </v-btn>
+            <v-btn
+                :class="breakpoints.smAndDown ? 'mr-3' : ''"
+                icon="mdi-fullscreen"
+            >
+            </v-btn>
+        </div>
+    </v-app-bar>
+    <v-navigation-drawer
+        class="mobile-navigation"
+        v-model="drawer"
+        app
+        temporary
+    >
+        <v-list>
+            <v-list-item link to="/">
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-home"></v-icon>
+                </template>
+                <v-list-item-title>Home</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+                v-if="authStore.loggedIn && appStore.isOnline"
+                link
+                to="/profile"
+            >
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-account"></v-icon>
+                </template>
+                <v-list-item-title>Profile</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+                v-if="authStore.loggedIn || !appStore.isOnline"
+                link
+                to="/models"
+            >
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-file"></v-icon>
+                </template>
+                <v-list-item-title>Models</v-list-item-title>
+            </v-list-item>
+            <!--            <v-list-item
+                v-if="authStore.loggedIn && appStore.isOnline"
+                link
+                to="/tags"
+            >
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-tag"></v-icon>
+                </template>
+                <v-list-item-title>Tags</v-list-item-title>
+            </v-list-item>-->
+            <v-list-item
+                v-if="authStore.loggedIn && appStore.isOnline"
+                link
+                to="/histories"
+            >
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-human-male-female-child"></v-icon>
+                </template>
+                <v-list-item-title>Histories</v-list-item-title>
+            </v-list-item>
+            <!-- TODO: add isAdmin check -->
+            <v-list-item
+                v-if="authStore.loggedIn && appStore.isOnline"
+                link
+                to="/admin"
+            >
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-security"></v-icon>
+                </template>
+                <v-list-item-title>Admin</v-list-item-title>
+            </v-list-item>
+        </v-list>
+        <v-divider></v-divider>
+        <v-list>
+            <v-list-item
+                v-if="!authStore.loggedIn && appStore.isOnline"
+                link
+                to="/register"
+            >
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-account-plus"></v-icon>
+                </template>
+                <v-list-item-title>Register</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+                v-if="!authStore.loggedIn && appStore.isOnline"
+                link
+                to="/login"
+            >
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-login-variant"></v-icon>
+                </template>
+                <v-list-item-title>Login</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+                v-if="authStore.loggedIn && appStore.isOnline"
+                link
+                @click="logoutAndRedirect()"
+            >
+                <template v-slot:prepend>
+                    <v-icon icon="mdi-logout-variant"></v-icon>
+                </template>
+                <v-list-item-title>Logout</v-list-item-title>
+            </v-list-item>
+            <v-list-item class="mobile-theme-button" link @click="toggleTheme">
+                <template v-slot:prepend>
+                    <v-icon
+                        :icon="
+                            theme.global.current.value.dark
+                                ? 'mdi-brightness-7'
+                                : 'mdi-brightness-4'
+                        "
+                    ></v-icon>
+                </template>
+                <v-list-item-title>Switch theme</v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+</template>
+
+<script setup>
+import { useAuthStore } from '@/store/auth';
+import { useAppStore } from '@/store/app';
+import { useTheme, useDisplay } from 'vuetify';
+import LoginDiv from '@/components/LoginDiv.vue';
+import { useRouter, useRoute } from 'vue-router';
+import { ref } from 'vue';
+import { useFileStore } from '@/store/file';
+
+const authStore = useAuthStore();
+const appStore = useAppStore();
+const theme = useTheme();
+const breakpoints = useDisplay();
+const isAdmin = true;
+const loginMenu = ref(false);
+const isMobileLandscape = false;
+const drawer = ref(false);
+
+const router = useRouter();
+const route = useRoute();
+
+function toggleTheme() {
+    theme.global.name.value = theme.global.current.value.dark
+        ? 'light'
+        : 'dark';
+}
+
+function logoutAndRedirect() {
+    if (route.path !== '/') {
+        router.push('/');
+    }
+    authStore.logout();
+    useFileStore().fetchConfirmedFeatureModels();
+}
+/*function logoutAndRedirect() {
+  if (this.$route.path !== '/') {
+    this.$router.push('/');
+  }
+  this.$store.dispatch('logout');
+}*/
+</script>
diff --git a/frontendVue3/src/components/upload_cards/FamilyCreate.vue b/frontendVue3/src/components/upload_cards/FamilyCreate.vue
new file mode 100644
index 00000000..cf4aef34
--- /dev/null
+++ b/frontendVue3/src/components/upload_cards/FamilyCreate.vue
@@ -0,0 +1,73 @@
+<template>
+    <v-card class="pa-2">
+        <v-card-title>Add new Family</v-card-title>
+        <v-card-text>
+            <v-form ref="tag-form">
+                <v-row no-gutters>
+                    <v-col cols="12" class="py-1">
+                        <v-text-field
+                            v-model="newFamily.label"
+                            hint="Name the new family"
+                            :rules="labelRules"
+                            label="Label"
+                            variant="outlined"
+                            density="comfortable"
+                            placeholder="Family name"
+                            required
+                        >
+                        </v-text-field>
+                    </v-col>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="newFamily.description"
+                            hint="Describe the new family"
+                            label="Description"
+                            variant="outlined"
+                            density="comfortable"
+                            placeholder="Family description"
+                        >
+                        </v-text-field>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </v-card-text>
+        <v-card-actions class="pa-4">
+            <v-spacer></v-spacer>
+            <v-btn color="error" text @click="$emit('close')"> Cancel </v-btn>
+            <v-btn
+                :loading="loadingAddFamily"
+                color="primary"
+                @click="uploadFamily()"
+                >Upload Family</v-btn
+            >
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { useFileStore } from '@/store/file';
+
+let emit = defineEmits(['close']);
+
+const fileStore = useFileStore();
+
+let newFamily = reactive({
+    label: '',
+    description: '',
+});
+
+let labelRules = [(v) => !!v || 'Label is required'];
+let loadingAddFamily = ref(false);
+
+async function uploadFamily() {
+    loadingAddFamily.value = true;
+    const uploadedTag = await fileStore.uploadFamily(newFamily);
+    await fileStore.fetchFamilies();
+    //this.tags.push({ label: uploadedTag.label, id: uploadedTag.id });
+    this.newFamily = { label: '', description: '' };
+    //this.editTagMenu = false;
+    this.loadingFamilyTag = false;
+    emit('close');
+}
+</script>
diff --git a/frontendVue3/src/components/upload_cards/FileCreate.vue b/frontendVue3/src/components/upload_cards/FileCreate.vue
new file mode 100644
index 00000000..e04ad240
--- /dev/null
+++ b/frontendVue3/src/components/upload_cards/FileCreate.vue
@@ -0,0 +1,932 @@
+<template>
+    <v-card class="pa-2" max-width="1000">
+        <v-card-title>
+            <span class="text-h5">Upload Feature Model</span>
+        </v-card-title>
+        <v-card-subtitle>
+            Use this form to upload a new Feature Model publicly
+        </v-card-subtitle>
+
+        <v-card-text>
+            <v-alert
+                :type="fileCreateAlert.variant"
+                variant="tonal"
+                v-model="fileCreateAlert.show"
+                closable
+                density="comfortable"
+            >
+                {{ fileCreateAlert.message }}
+                <v-spacer></v-spacer>
+            </v-alert>
+            <v-tabs v-model="tab" class="mb-3" align-tabs="center">
+                <v-tab value="single"> Single Upload </v-tab>
+                <v-tab value="multiple"> Multiple Upload </v-tab>
+                <v-tab value="zip"> Zip Upload </v-tab>
+            </v-tabs>
+
+            <v-window v-model="tab">
+                <v-window-item value="single">
+                    <single @close="$emit('close')"></single>
+                </v-window-item>
+                <v-window-item value="multiple"> Multiple </v-window-item>
+                <v-window-item value="zip"> Zip </v-window-item>
+            </v-window>
+            <!--            <v-tabs-items v-model="tab" class="pt-4">
+&lt;!&ndash;                <v-tab-item> </v-tab-item>&ndash;&gt;
+                &lt;!&ndash;          <v-tab-item>
+            <v-container>
+              <div class="mb-6">
+                <b>Name: </b> The name of the Feature Model is
+                derived from the individual file name. <br />
+                <b>Description: </b> The description of the
+                Feature Model will be a static notice with a
+                timestamp. <br />
+                <b>License: </b> The chosen license will be
+                applied to each individual Feature Model. <br />
+                <b>Version: </b> Version will be incremented
+                automatically. <br />
+                <b>Tags: </b> The chosen tags will be applied to
+                each individual Feature Model. <br />
+              </div>
+              <v-form
+                ref="bulkform"
+                v-model="valid_bulk"
+                lazy-validation
+              >
+                <v-row>
+                  <v-col class="py-0" cols="12" md="6">
+                    <v-file-input
+                      v-model="file_bulk"
+                      :rules="fileRules"
+                      accept=".xml"
+                      multiple
+                      dense
+                      hint="Select the files as .xml"
+                      label="File Upload"
+                      outlined
+                      required
+                      show-size
+                    ></v-file-input>
+                  </v-col>
+                  <v-col class="py-0" cols="12" md="6">
+                    <v-select
+                      v-model="license_bulk"
+                      :items="getLicenses"
+                      :rules="licenseRules"
+                      dense
+                      hint="Select the license of the feature model"
+                      label="License"
+                      outlined
+                      required
+                    >
+                    </v-select>
+                  </v-col>
+                  <v-col class="py-0" cols="12" md="6">
+                    &lt;!&ndash; Change back to v-combobox when new family upload is working properly &ndash;&gt;
+                    <v-text-field
+                      v-model="family_bulk"
+                      :required="true"
+                      dense
+                      hint="Create new family"
+                      label="New Family"
+                      outlined
+                    ></v-text-field>
+                  </v-col>
+                  <v-col class="py-0" cols="12" md="6">
+                    <v-text-field
+                      v-model="newFamilyDescription_bulk"
+                      dense
+                      hint="Describe your new family"
+                      label="New Family Description"
+                      outlined
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col class="py-0" cols="12">
+                    &lt;!&ndash; Change back to v-combobox once sequential axios requests are implemented &ndash;&gt;
+                    <v-autocomplete
+                      v-model="tags_bulk"
+                      :items="getTags"
+                      append-outer-icon="mdi-plus"
+                      chips
+                      dense
+                      hide-details
+                      hint="Choose or create tags for your feature model"
+                      label="Tags"
+                      multiple
+                      outlined
+                      small-chips
+                      @click:append-outer="
+                                                editTagMenu = !editTagMenu
+                                            "
+                    ></v-autocomplete>
+                  </v-col>
+                  <v-col class="pb-0" cols="12">
+                    <v-checkbox
+                      v-model="legalShare_bulk"
+                      class="mt-0"
+                      hide-details
+                      label="I am legally allowed to share this model"
+                      outlined
+                      required
+                    >
+                    </v-checkbox>
+                  </v-col>
+                  <v-col class="py-0" cols="12">
+                    <v-checkbox
+                      v-model="userData_bulk"
+                      class="mt-0"
+                      hide-details
+                      label="My email and a date will always be tied to the file upload (even after account deletion)"
+                      outlined
+                      required
+                    >
+                    </v-checkbox>
+                  </v-col>
+                  <v-col class="py-0" cols="12">
+                    <v-checkbox
+                      v-model="openSource_bulk"
+                      class="mt-0"
+                      hide-details
+                      label="All information will be published according to your chosen license"
+                      outlined
+                      required
+                    >
+                    </v-checkbox>
+                  </v-col>
+                  <v-col class="pb-0" cols="12">
+                    <div class="d-flex align-center">
+                      <v-spacer></v-spacer>
+                      <span
+                        v-if="uploadStatus !== ''"
+                        class="text-subtitle-1"
+                      >{{ uploadStatus }}</span
+                      >
+                      <v-btn
+                        color="primary"
+                        text
+                        @click="close"
+                      >
+                        Cancel
+                      </v-btn>
+                      <v-btn
+                        :disabled="
+                                                    !valid_bulk ||
+                                                    !openSource_bulk ||
+                                                    !userData_bulk ||
+                                                    !legalShare_bulk
+                                                "
+                        :loading="loading"
+                        color="primary"
+                        @click="uploadBulk()"
+                      >
+                        Upload
+                      </v-btn>
+                    </div>
+                  </v-col>
+                </v-row>
+              </v-form>
+            </v-container>
+          </v-tab-item>
+          <v-tab-item>
+            <v-container>
+              <div class="mb-6">
+                <b>License: </b> The chosen license will be
+                applied to each individual Feature Model. <br />
+                <b>Version: </b> Version will be incremented
+                automatically. <br />
+                <b>Tags: </b> The chosen tags will be applied to
+                each individual Feature Model. <br />
+              </div>
+              <v-form
+                ref="zipform"
+                v-model="valid_zip"
+                lazy-validation
+              >
+                <v-row>
+                  <v-col class="py-0" cols="12">
+                    <v-text-field
+                      v-model="label_zip"
+                      :rules="labelRules"
+                      dense
+                      hint="Name your feature models"
+                      label="File name"
+                      outlined
+                      placeholder="Leave a filename"
+                      required
+                    ></v-text-field>
+                  </v-col>
+                  <v-col class="py-0" cols="12">
+                    <v-textarea
+                      v-model="description_zip"
+                      :rules="descriptionRules"
+                      counter="250"
+                      dense
+                      hint="Add a description to your feature models"
+                      label="Description"
+                      outlined
+                      placeholder="Leave a comment here"
+                      rows="2"
+                    >
+                    </v-textarea>
+                  </v-col>
+                  <v-col class="py-0" cols="12" md="6">
+                    <v-file-input
+                      v-model="file_zip"
+                      :rules="fileRules"
+                      accept=".zip"
+                      dense
+                      hint="Select the files as .zip"
+                      label="File Upload"
+                      outlined
+                      required
+                      show-size
+                    ></v-file-input>
+                  </v-col>
+                  <v-col class="py-0" cols="12" md="6">
+                    <v-select
+                      v-model="license_zip"
+                      :items="getLicenses"
+                      :rules="licenseRules"
+                      dense
+                      hint="Select the license of the feature model"
+                      label="License"
+                      outlined
+                      required
+                    >
+                    </v-select>
+                  </v-col>
+                  <v-col class="py-0" cols="12" md="6">
+                    &lt;!&ndash; Change back to v-combobox when new family upload is working properly &ndash;&gt;
+                    <v-text-field
+                      v-model="family_zip"
+                      :required="true"
+                      dense
+                      hint="Create new family"
+                      label="New Family"
+                      outlined
+                    ></v-text-field>
+                  </v-col>
+                  <v-col class="py-0" cols="12" md="6">
+                    <v-text-field
+                      v-model="newFamilyDescription_zip"
+                      dense
+                      hint="Describe your new family"
+                      label="New Family Description"
+                      outlined
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col class="py-0" cols="12">
+                    &lt;!&ndash; Change back to v-combobox once sequential axios requests are implemented &ndash;&gt;
+                    <v-autocomplete
+                      v-model="tags_zip"
+                      :items="getTags"
+                      append-outer-icon="mdi-plus"
+                      chips
+                      dense
+                      hide-details
+                      hint="Choose or create tags for your feature model"
+                      label="Tags"
+                      multiple
+                      outlined
+                      small-chips
+                      @click:append-outer="
+                                                editTagMenu = !editTagMenu
+                                            "
+                    ></v-autocomplete>
+                  </v-col>
+                  <v-col class="pb-0" cols="12">
+                    <v-checkbox
+                      v-model="legalShare_zip"
+                      class="mt-0"
+                      hide-details
+                      label="I am legally allowed to share this model"
+                      outlined
+                      required
+                    >
+                    </v-checkbox>
+                  </v-col>
+                  <v-col class="py-0" cols="12">
+                    <v-checkbox
+                      v-model="userData_zip"
+                      class="mt-0"
+                      hide-details
+                      label="My email and a date will always be tied to the file upload (even after account deletion)"
+                      outlined
+                      required
+                    >
+                    </v-checkbox>
+                  </v-col>
+                  <v-col class="py-0" cols="12">
+                    <v-checkbox
+                      v-model="openSource_zip"
+                      class="mt-0"
+                      hide-details
+                      label="All information will be published according to your chosen license"
+                      outlined
+                      required
+                    >
+                    </v-checkbox>
+                  </v-col>
+                  <v-col class="pb-0" cols="12">
+                    <div class="d-flex align-center">
+                      <v-spacer></v-spacer>
+                      <span
+                        v-if="uploadStatus !== ''"
+                        class="text-subtitle-1"
+                      >{{ uploadStatus }}</span
+                      >
+                      <v-btn
+                        color="primary"
+                        text
+                        @click="close"
+                      >
+                        Cancel
+                      </v-btn>
+                      <v-btn
+                        :disabled="
+                                                    !valid_zip ||
+                                                    !openSource_zip ||
+                                                    !userData_zip ||
+                                                    !legalShare_zip
+                                                "
+                        :loading="loading"
+                        color="primary"
+                        @click="uploadZip()"
+                      >
+                        Upload
+                      </v-btn>
+                    </div>
+                  </v-col>
+                </v-row>
+              </v-form>
+            </v-container>
+          </v-tab-item>&ndash;&gt;
+            </v-tabs-items>-->
+        </v-card-text>
+    </v-card>
+    <!--    <v-dialog v-model="editTagMenu" max-width="350">
+      <v-card>
+        <v-card-title>Add new Tag</v-card-title>
+        <v-card-text>
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-text-field
+                v-model="newTag.label"
+                hide-details
+                label="Label"
+              >
+              </v-text-field>
+            </v-col>
+            <v-col cols="12">
+              <v-text-field
+                v-model="newTag.description"
+                hide-details
+                label="Description"
+              >
+              </v-text-field>
+            </v-col>
+            <v-col cols="12">
+              <v-checkbox
+                v-model="newTag.is_public"
+                hide-details
+                label="Public"
+              ></v-checkbox>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions class="pa-4">
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            text
+            @click="editTagMenu = !editTagMenu"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            :loading="loadingAddTag"
+            color="primary"
+            @click="uploadTag()"
+          >Upload Tag</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>-->
+</template>
+
+<script setup>
+import api from '@/services/api.service';
+import { onMounted, ref, watch } from 'vue';
+import Single from '@/components/upload_cards/file_create/Single.vue';
+import { useAppStore } from '@/store/app';
+import { storeToRefs } from 'pinia';
+import { useFileStore } from '@/store/file';
+
+const emit = defineEmits(['close']);
+
+const appStore = useAppStore();
+
+const { fileCreateAlert } = storeToRefs(useAppStore());
+
+const API_URL = import.meta.env.VUE_APP_DOMAIN;
+
+let tab = ref(0);
+let labelRules = [(v) => !!v || 'Label is required'];
+
+let description = ref('');
+let descriptionRules = [
+    (v) => !!v || 'Description is required',
+    (v) => v.length <= 250 || 'Max 250 characters please',
+];
+
+let file = ref(null);
+let fileRules = [(v) => !!v || 'File is required'];
+
+let gottenLicenses = ref([]);
+let license = ref('');
+let licenseRules = [(v) => !!v || 'License is required'];
+
+let gottenFamilies = ref([]);
+let gottenFiles = ref([]);
+
+let version = ref('');
+let allVersions = ref([]);
+let latestFeatureModelVersion = ref(null);
+let numberOfModelsInFamily = ref(0);
+let newFamilyIsObject = ref(false);
+let versionRules = [(v) => !!v || 'Version is required'];
+
+let family = ref(null);
+let newFamilyDescription = ref('');
+let isNewFamily = ref(false);
+
+let gottenTags = ref([]);
+let tags = ref([]);
+let newTag = { label: '', description: '', is_public: false };
+
+let legalShare = ref(false);
+let userData = ref(false);
+let openSource = ref(false);
+
+onMounted(() => {
+    const fileStore = useFileStore();
+    fileStore.fetchLicenses();
+    fileStore.fetchTags();
+    fileStore.fetchFamilies();
+});
+
+/*watch(family, (newValue) => {
+    newFamilyIsObject.value = false;
+    if (typeof newValue == 'string') {
+      isNewFamily.value = !gottenFamilies.value
+        .map((x) => x.text)
+        .includes(newValue);
+    } else if (typeof newValue == 'object' && newValue != null) {
+      this.isNewFamily = !this.gottenFamilies
+        .map((x) => x.text)
+        .includes(newValue.text);
+      !this.isNewFamily
+        ? (this.newFamilyIsObject = true)
+        : (this.newFamilyIsObject = false);
+    } else {
+      this.isNewFamily = false;
+    }
+
+    if (this.isNewFamily) {
+      this.latestFeatureModelVersion = null;
+    } else {
+      if (this.newFamilyIsObject) {
+        this.fetchFeatureModelOfFamily(newValue.value);
+      } else {
+        this.fetchFeatureModelOfFamily(
+          this.gottenFamilies.find(
+            (family) => family.text === newValue
+          ).value
+        );
+      }
+    }
+});*/
+
+//export default Vue.extend({
+/*data: () => ({
+    valid: false,
+    valid_bulk: false,
+    valid_zip: false,
+
+    label: '',
+    label_zip: '',
+    labelRules: [(v) => !!v || 'Label is required'],
+
+    description: '',
+    description_zip: '',
+    descriptionRules: [
+      (v) => !!v || 'Description is required',
+      (v) => v.length <= 250 || 'Max 250 characters please',
+    ],
+
+    file: null,
+    file_bulk: [],
+    file_zip: null,
+    fileRules: [(v) => !!v || 'File is required'],
+
+    gottenLicenses: [],
+    license: '',
+    license_bulk: '',
+    license_zip: '',
+    licenseRules: [(v) => !!v || 'License is required'],
+
+    gottenFamilies: [],
+    gottenFiles: [],
+
+    version: '',
+    allVersions: [],
+    versionRules: [(v) => !!v || 'Version is required'],
+
+    family: null,
+    family_bulk: null,
+    family_zip: null,
+    newFamilyDescription: '',
+    newFamilyDescription_bulk: '',
+    newFamilyDescription_zip: '',
+    isNewFamily: false,
+
+    gottenTags: [],
+    tags: [],
+    tags_bulk: [],
+    tags_zip: [],
+    newTag: { label: '', description: '', is_public: false },
+
+    legalShare: false,
+    userData: false,
+    openSource: false,
+
+    legalShare_bulk: false,
+    userData_bulk: false,
+    openSource_bulk: false,
+
+    legalShare_zip: false,
+    userData_zip: false,
+    openSource_zip: false,
+
+    loading: false,
+    uploadStatus: '',
+
+    editTagMenu: false,
+    loadingAddTag: false,
+
+    latestFeatureModelVersion: null,
+    numberOfModelsInFamily: 0,
+    newFamilyIsObject: false,
+
+    tab: 0,
+
+    /!* gottenFiles: [],
+    newVersionOf: "",
+    featureFamily: "",
+    tags: "",
+    loading: false,
+    newVersionOfSelection: false,
+    featureModelFamilySelection: false, *!/
+  }),*/
+
+/*watch: {
+    '$store.state.licenses': function () {
+      this.gottenLicenses = this.$store.state.licenses;
+    },
+    '$store.state.tags': function () {
+      this.gottenTags = this.$store.state.tags;
+    },
+    '$store.state.families': function () {
+      this.gottenFamilies = this.$store.state.families;
+    },
+    '$store.state.files': function () {
+      this.gottenFiles = this.$store.state.files;
+    },
+    family: function (newValue) {
+      this.newFamilyIsObject = false;
+      if (typeof newValue == 'string') {
+        this.isNewFamily = !this.gottenFamilies
+          .map((x) => x.text)
+          .includes(newValue);
+      } else if (typeof newValue == 'object' && newValue != null) {
+        this.isNewFamily = !this.gottenFamilies
+          .map((x) => x.text)
+          .includes(newValue.text);
+        !this.isNewFamily
+          ? (this.newFamilyIsObject = true)
+          : (this.newFamilyIsObject = false);
+      } else {
+        this.isNewFamily = false;
+      }
+
+      if (this.isNewFamily) {
+        this.latestFeatureModelVersion = null;
+      } else {
+        if (this.newFamilyIsObject) {
+          this.fetchFeatureModelOfFamily(newValue.value);
+        } else {
+          this.fetchFeatureModelOfFamily(
+            this.gottenFamilies.find(
+              (family) => family.text === newValue
+            ).value
+          );
+        }
+      }
+    },
+    /!*tags: function (newValue) {
+        /!*console.log(newValue);*!/
+    },*!/
+    allVersions: function (newValue) {
+      this.versionRules = [
+        (v) => !!v || 'Version is required',
+        (v) => !newValue.includes(v) || 'Version already exists',
+      ];
+    },
+  },
+
+  computed: {
+    getLicenses() {
+      return this.gottenLicenses.map((element) => ({
+        text: element.label,
+        value: element.id,
+      }));
+    },
+    getFamilies() {
+      return this.gottenFamilies
+        .filter((element) => element.owner)
+        .map((element) => ({ text: element.label, value: element.id }));
+    },
+    getFiles() {
+      return this.gottenFiles
+        .filter((element) => element.owner)
+        .map((element) => ({ text: element.label, value: element.id }));
+    },
+    getTags() {
+      return this.gottenTags.map((element) => ({
+        text: element.label,
+        value: { label: element.label, id: element.id },
+      }));
+    },
+  },*/
+
+/*methods: {
+    close() {
+      this.$emit('close');
+    },
+    transferToDropdown(objects) {
+      return objects
+        .filter((element) => element.owner)
+        .map((element) => ({ text: element.label, value: element.id }));
+    },
+    async uploadBulk() {
+      if (this.$refs.bulkform.validate() !== false) {
+        this.loading = true;
+        let versionMajor = 1;
+        const data = new FormData();
+        let file_data = [];
+        let uploaded_family_id = -1;
+        for (let i = 0; i < this.file_bulk.length; i++) {
+          let file_object = {};
+          file_object['label'] = this.file_bulk[i].name.slice(0, -4);
+          /!*console.log('LABEL')
+console.log(this.file_bulk[i].name.slice(0, -4))*!/
+          const event = new Date();
+          const options = {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+          };
+          file_object[
+            'description'
+            ] = `Added in bulk upload on ${event.toLocaleDateString(
+            'en-US',
+            options
+          )}`;
+          /!*console.log('DESCRIPTION')
+console.log(
+  `Added in bulk upload on ${event.toLocaleDateString(
+    'en-US',
+    options
+  )}`
+)*!/
+          //data.append('local_file', this.file_bulk[i])
+          file_object['license'] = this.license_bulk;
+          /!*console.log('LICENSE')
+console.log(this.license_bulk)*!/
+          file_object['version'] = `${versionMajor}`;
+          /!*console.log('VERSION')
+console.log(`${versionMajor}.0.0`)*!/
+          if (i !== 0) {
+            //change back to this.family.value when using v-combobox again
+            file_object['family'] = uploaded_family_id;
+            /!*console.log('FAMILY (not new)')
+console.log(uploaded_family_id)*!/
+          } else {
+            this.uploadStatus = 'Uploading new family...';
+            const uploadedFamily = await this.$store.dispatch(
+              'uploadFamily',
+              {
+                label: this.family_bulk,
+                description: this.newFamilyDescription_bulk,
+              }
+            );
+            uploaded_family_id = uploadedFamily.id;
+            file_object['family'] = uploaded_family_id;
+            /!*console.log('FAMILY (new) id:')
+console.log(uploadedFamily.id)*!/
+          }
+          file_object['tags'] = this.tags_bulk.map((x) =>
+            parseInt(x.id)
+          );
+          /!*console.log('TAGS');
+          console.log(this.tags_bulk.map((x) => x.id));*!/
+          file_object['file'] = `${i}`;
+          /!*console.log('FILE (reference):')
+console.log(`${i}`)*!/
+          versionMajor++;
+          file_data.push(file_object);
+        }
+        data.append('files', JSON.stringify(file_data));
+        /!*console.log('FILES (in total finished):');
+        console.log(JSON.stringify(file_data));*!/
+        for (let i = 0; i < this.file_bulk.length; i++) {
+          data.append(`${i}`, this.file_bulk[i]);
+        }
+        /!*console.log('DATA (in total finished):');
+        console.log(data);*!/
+        this.uploadStatus =
+          'Uploading bulk files. This may take a while...';
+        await this.$store.dispatch('uploadBulkFeatureModels', data);
+        /!*console.log('finished uploading files')*!/
+        this.uploadStatus = '';
+        this.loading = false;
+        this.close();
+      }
+    },
+    async uploadZip() {
+      if (this.$refs.zipform.validate() !== false) {
+        this.loading = true;
+        const data = new FormData();
+        let uploaded_family_id = -1;
+        let file_object = {};
+        file_object['label'] = this.label_zip;
+        /!*console.log('LABEL')
+  console.log(this.file_bulk[i].name.slice(0, -4))*!/
+        file_object['description'] = this.description_zip;
+        /!*console.log('DESCRIPTION')
+  console.log(this.description_zip)*!/
+        //data.append('local_file', this.file_bulk[i])
+        file_object['license'] = this.license_zip;
+        /!*console.log('LICENSE')
+  console.log(this.license_bulk)*!/
+        this.uploadStatus = 'Uploading new family...';
+        const uploadedFamily = await this.$store.dispatch(
+          'uploadFamily',
+          {
+            label: this.family_zip,
+            description: this.newFamilyDescription_zip,
+          }
+        );
+        uploaded_family_id = uploadedFamily.id;
+        file_object['family'] = uploaded_family_id;
+        /!*console.log('FAMILY (new) id:')
+  console.log(uploadedFamily.id)*!/
+        file_object['tags'] = this.tags_zip.map((x) => parseInt(x.id));
+        /!*console.log('TAGS');
+  console.log(this.tags_zip.map((x) => x.id));*!/
+        data.append('files', JSON.stringify(file_object));
+        console.log('FILES (in total finished):');
+        console.log(JSON.stringify(file_object));
+        data.append('file', this.file_zip);
+        console.log('DATA (in total finished):');
+        console.log(data);
+        this.uploadStatus =
+          'Uploading zip file. This may take a while...';
+        await this.$store.dispatch('uploadZipFeatureModel', data);
+        /!*console.log('finished uploading files')*!/
+        this.uploadStatus = '';
+        this.loading = false;
+        this.close();
+      }
+    },
+    async uploadSingle() {
+      if (this.$refs.form.validate() !== false) {
+        this.loading = true;
+        const data = new FormData();
+        let file_data = [];
+        let file_object = {};
+
+        file_object['label'] = this.label;
+        /!*console.log('LABEL')
+console.log(this.label)*!/
+        file_object['description'] = this.description;
+        /!*console.log('DESCRIPTION')
+console.log(this.description)*!/
+        file_object['license'] = this.license;
+        /!*console.log('LICENSE')
+console.log(this.license)*!/
+        file_object['version'] = this.version;
+        /!*console.log('VERSION')
+console.log(this.version)*!/
+        if (!this.isNewFamily) {
+          //change back to this.family.value when using v-combobox again
+          file_object['family'] = this.family.value;
+          /!*console.log('FAMILY (not new)')
+console.log(this.family.value)*!/
+        } else {
+          this.uploadStatus = 'Uploading new family...';
+          const uploadedFamily = await this.$store.dispatch(
+            'uploadFamily',
+            {
+              label: this.family,
+              description: this.newFamilyDescription,
+            }
+          );
+          file_object['family'] = uploadedFamily.id;
+          /!*console.log('FAMILY (new)')
+console.log(uploadedFamily.id)*!/
+        }
+        file_object['tags'] = this.tags.map((x) => parseInt(x.id));
+        /!*console.log('TAGS');
+        console.log(this.tags.map((x) => parseInt(x.id)));*!/
+        file_object['file'] = '0';
+        file_data.push(file_object);
+        /!*console.log('FILES (in total finished):');
+        console.log(JSON.stringify(file_data));*!/
+        data.append('files', JSON.stringify(file_data));
+        data.append('0', this.file);
+        this.uploadStatus = 'Uploading file...';
+        await this.$store.dispatch('uploadBulkFeatureModels', data);
+        /!*console.log('finished uploading file')*!/
+        this.uploadStatus = '';
+        this.loading = false;
+        this.close();
+      }
+    },
+    async uploadTag() {
+      this.loadingAddTag = true;
+      const uploadedTag = await this.$store.dispatch(
+        'uploadTag',
+        this.newTag
+      );
+      await this.$store.dispatch('fetchTags');
+      this.tags.push({ label: uploadedTag.label, id: uploadedTag.id });
+      this.newTag = { label: '', description: '', is_public: false };
+      this.editTagMenu = false;
+      this.loadingAddTag = false;
+    },
+    async fetchFeatureModelOfFamily(value) {
+      /!*console.log(`${API_URL}files/uploaded/confirmed/?family=${value}`)*!/
+      await api
+        .get(`${API_URL}files/uploaded/confirmed/?family=${value}`)
+        .then((response) => {
+          if (response.data.length === 0) {
+            this.latestFeatureModelVersion = null;
+          } else {
+            this.numberOfModelsInFamily = response.data.length;
+            this.allVersions = response.data.map(
+              (item) => item.version
+            );
+            this.latestFeatureModelVersion =
+              response.data[response.data.length - 1].version;
+          }
+        });
+    },
+    /!*uploadFile() {
+
+    },
+    uploadFamily() {
+
+    },
+    uploadTags() {
+
+    }*!/
+  },
+
+  mounted() {
+    this.$store.dispatch('fetchLicenses');
+    if (this.$store.state.families !== []) {
+      this.gottenFamilies = this.$store.state.families.map((x) => {
+        return { text: x.label, value: x.id };
+      });
+    } else {
+      this.$store.dispatch('fetchFamilies');
+    }
+    if (this.$store.state.files !== []) {
+      this.gottenFiles = this.$store.state.files.map((x) => {
+        return { text: x.label, value: x.id };
+      });
+    } else {
+      this.$store.dispatch('fetchFiles');
+    }
+    this.$store.dispatch('fetchTags');
+  },*/
+//});
+</script>
diff --git a/frontendVue3/src/components/upload_cards/TagCreate.vue b/frontendVue3/src/components/upload_cards/TagCreate.vue
new file mode 100644
index 00000000..4bb8c2ab
--- /dev/null
+++ b/frontendVue3/src/components/upload_cards/TagCreate.vue
@@ -0,0 +1,81 @@
+<template>
+    <v-card class="pa-2">
+        <v-card-title>Add new Tag</v-card-title>
+        <v-card-text>
+            <v-form ref="tag-form">
+                <v-row no-gutters>
+                    <v-col cols="12" class="py-1">
+                        <v-text-field
+                            v-model="newTag.label"
+                            hint="Name the new tag"
+                            :rules="labelRules"
+                            label="Label"
+                            variant="outlined"
+                            density="comfortable"
+                            placeholder="Tag name"
+                            required
+                        >
+                        </v-text-field>
+                    </v-col>
+                    <v-col cols="12">
+                        <v-text-field
+                            v-model="newTag.description"
+                            hint="Describe the new tag"
+                            label="Description"
+                            variant="outlined"
+                            density="comfortable"
+                            placeholder="Tag description"
+                        >
+                        </v-text-field>
+                    </v-col>
+                    <v-col cols="12">
+                        <v-checkbox
+                            v-model="newTag.is_public"
+                            hide-details
+                            label="Public"
+                            class="mt-0"
+                            density="compact"
+                            required
+                        ></v-checkbox>
+                    </v-col>
+                </v-row>
+            </v-form>
+        </v-card-text>
+        <v-card-actions class="pa-4">
+            <v-spacer></v-spacer>
+            <v-btn color="error" text @click="$emit('close')"> Cancel </v-btn>
+            <v-btn :loading="loadingAddTag" color="primary" @click="uploadTag()"
+                >Upload Tag</v-btn
+            >
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { useFileStore } from '@/store/file';
+
+let emit = defineEmits(['close']);
+
+const fileStore = useFileStore();
+
+let newTag = reactive({
+    label: '',
+    description: '',
+    is_public: false,
+});
+
+let labelRules = [(v) => !!v || 'Label is required'];
+let loadingAddTag = ref(false);
+
+async function uploadTag() {
+    loadingAddTag.value = true;
+    const uploadedTag = await fileStore.uploadTag(newTag);
+    await fileStore.fetchTags();
+    //this.tags.push({ label: uploadedTag.label, id: uploadedTag.id });
+    this.newTag = { label: '', description: '', is_public: false };
+    //this.editTagMenu = false;
+    this.loadingAddTag = false;
+    emit('close');
+}
+</script>
diff --git a/frontendVue3/src/components/upload_cards/file_create/ActionButtons.vue b/frontendVue3/src/components/upload_cards/file_create/ActionButtons.vue
new file mode 100644
index 00000000..254b424f
--- /dev/null
+++ b/frontendVue3/src/components/upload_cards/file_create/ActionButtons.vue
@@ -0,0 +1,88 @@
+<template>
+    <v-col cols="12">
+        <div class="d-flex align-center">
+            <v-spacer></v-spacer>
+            <span v-if="uploadStatus !== ''" class="text-subtitle-1">
+                {{ uploadStatus }}
+            </span>
+            <v-btn color="error" variant="text" @click="emit('close')">
+                Cancel
+            </v-btn>
+            <v-btn
+                type="submit"
+                :loading="loading"
+                color="primary"
+                @click="upload()"
+            >
+                Upload
+            </v-btn>
+        </div>
+    </v-col>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useFileStore } from '@/store/file';
+
+const fileStore = useFileStore();
+
+const emit = defineEmits(['close', 'submitClick']);
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+    },
+    valid: {
+        type: Object,
+    },
+});
+
+let uploadStatus = ref('');
+let loading = ref(false);
+
+async function upload() {
+    const { valid } = await props.valid.validate();
+    if (valid) {
+        this.loading = true;
+        const data = new FormData();
+        let file_data = [];
+        let file_object = {};
+
+        file_object['label'] = props.data.label;
+        console.log('LABEL');
+        console.log(props.data.label);
+        file_object['description'] = props.data.description;
+        console.log('DESCRIPTION');
+        console.log(props.data.description);
+        file_object['license'] = props.data.license;
+        console.log('LICENSE');
+        console.log(props.data.license);
+        file_object['version'] = props.data.version;
+        console.log('VERSION');
+        console.log(props.data.version);
+
+        file_object['family'] = props.data.family;
+        console.log('FAMILY');
+        console.log(props.data.family);
+        file_object['tags'] = props.data.tags;
+        console.log('TAGS');
+        console.log(props.data.tags);
+        file_object['file'] = '0';
+        file_data.push(file_object);
+        console.log('FILES (in total finished):');
+        console.log(JSON.stringify(file_data));
+        data.append('files', JSON.stringify(file_data));
+        console.log(props.data.file);
+        data.append('0', props.data.file[0]);
+        uploadStatus.value = 'Uploading file...';
+        await fileStore.uploadBulkFeatureModels(data);
+        /*console.log('finished uploading file')*/
+        uploadStatus.value = '';
+        loading.value = false;
+        emit('close');
+    } else {
+        emit('submitClick');
+    }
+}
+</script>
diff --git a/frontendVue3/src/components/upload_cards/file_create/Single.vue b/frontendVue3/src/components/upload_cards/file_create/Single.vue
new file mode 100644
index 00000000..1ef7e5d8
--- /dev/null
+++ b/frontendVue3/src/components/upload_cards/file_create/Single.vue
@@ -0,0 +1,277 @@
+<template>
+    <v-container>
+        <v-form ref="form" @submit.prevent>
+            <v-row>
+                <v-col class="py-1" cols="12">
+                    <v-text-field
+                        v-model="formData.label"
+                        :rules="labelRules"
+                        hint="Name your feature model"
+                        label="File name"
+                        variant="outlined"
+                        density="comfortable"
+                        placeholder="Leave a filename"
+                        required
+                    ></v-text-field>
+                </v-col>
+                <v-col class="py-1" cols="12">
+                    <v-textarea
+                        v-model="formData.description"
+                        :rules="descriptionRules"
+                        counter="250"
+                        hint="Add a description to your feature model"
+                        label="Description"
+                        variant="outlined"
+                        density="comfortable"
+                        placeholder="Leave a comment here"
+                        rows="2"
+                    >
+                    </v-textarea>
+                </v-col>
+                <v-col class="py-1" cols="12" md="6">
+                    <v-file-input
+                        v-model="formData.file"
+                        :rules="fileRules"
+                        accept=".xml"
+                        small-chips
+                        variant="outlined"
+                        density="comfortable"
+                        hint="Select the file as .xml"
+                        label="File Upload"
+                        required
+                        show-size
+                    ></v-file-input>
+                </v-col>
+                <v-col class="py-1" cols="12" md="6">
+                    <v-select
+                        v-model="formData.license"
+                        :items="licenses"
+                        item-title="label"
+                        item-value="id"
+                        :rules="licenseRules"
+                        hint="Select the license of the feature model"
+                        label="License"
+                        variant="outlined"
+                        density="comfortable"
+                        required
+                    >
+                    </v-select>
+                </v-col>
+            </v-row>
+            <v-row align="end" justify="space-between">
+                <v-col class="py-1" cols="12" md="6">
+                    <!-- Change back to v-combobox when new family upload is working properly -->
+                    <v-autocomplete
+                        v-model="formData.family"
+                        :items="fileStore.myOwnFamilies"
+                        item-title="label"
+                        item-value="id"
+                        :required="true"
+                        :rules="familyRules"
+                        variant="outlined"
+                        density="comfortable"
+                        hint="Add to or create new family"
+                        label="Family"
+                        append-icon="mdi-plus"
+                        @click:append="addFamilyMenu = !addFamilyMenu"
+                        @change="familyChange"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col class="py-1" cols="12" md="6">
+                    <!--                    <div
+                        class="mb-3"
+                        v-if="
+                            latestFeatureModelVersion == null && family !== null
+                        "
+                    >
+                        No feature models in this family yet
+                    </div>
+                    <div
+                        class="mb-3"
+                        v-else-if="
+                            latestFeatureModelVersion !== null &&
+                            family !== null
+                        "
+                    >
+                        Currently
+                        <span style="font-weight: bold">{{
+                            numberOfModelsInFamily
+                        }}</span>
+                        {{
+                            numberOfModelsInFamily === 1
+                                ? 'Feature Model'
+                                : 'Feature Models'
+                        }}
+                        in
+                        <span style="font-weight: bold">{{
+                            this.newFamilyIsObject ? family.text : family
+                        }}</span>
+                        family
+                        <br />
+                        Latest version:
+                        <span style="font-weight: bold">{{
+                            latestFeatureModelVersion
+                        }}</span>
+                    </div>-->
+                    <v-text-field
+                        v-model="formData.version"
+                        :rules="versionRules"
+                        :required="true"
+                        :disabled="formData.family === null"
+                        hint="Version of feature model"
+                        :label="
+                            formData.family === null
+                                ? 'Version (specify family first)'
+                                : 'Version'
+                        "
+                        placeholder="1.0.0"
+                        variant="outlined"
+                        density="comfortable"
+                    ></v-text-field>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-col class="py-1" cols="12">
+                    <!-- Change back to v-combobox once sequential axios requests are implemented -->
+                    <v-autocomplete
+                        v-model="formData.tags"
+                        :items="myOwnTags"
+                        append-icon="mdi-plus"
+                        item-value="id"
+                        item-title="label"
+                        chips
+                        variant="outlined"
+                        density="comfortable"
+                        hide-details
+                        hint="Choose or create tags for your feature model"
+                        label="Tags"
+                        multiple
+                        @click:append="addTagMenu = !addTagMenu"
+                    ></v-autocomplete>
+                </v-col>
+                <v-col class="pb-1" cols="12">
+                    <v-checkbox
+                        v-model="formData.legalShare"
+                        class="mt-0"
+                        label="I am legally allowed to share this model"
+                        density="compact"
+                        required
+                        :hide-details="!showDetails"
+                        :rules="checkboxRules"
+                    >
+                    </v-checkbox>
+                </v-col>
+                <v-col class="py-1" cols="12">
+                    <v-checkbox
+                        v-model="formData.userData"
+                        class="mt-0"
+                        label="My email and a date will always be tied to the file upload (even after account deletion)"
+                        density="compact"
+                        required
+                        :hide-details="!showDetails"
+                        :rules="checkboxRules"
+                    >
+                    </v-checkbox>
+                </v-col>
+                <v-col class="py-1" cols="12">
+                    <v-checkbox
+                        v-model="formData.openSource"
+                        class="mt-0"
+                        label="All information will be published according to your chosen license"
+                        density="compact"
+                        required
+                        :hide-details="!showDetails"
+                        :rules="checkboxRules"
+                    >
+                    </v-checkbox>
+                </v-col>
+                <action-buttons
+                    :data="formData"
+                    :valid="form"
+                    @close="$emit('close')"
+                    @submit-click="showDetails = true"
+                ></action-buttons>
+            </v-row>
+        </v-form>
+    </v-container>
+    <v-dialog v-model="addTagMenu" max-width="350">
+        <tag-create @close="addTagMenu = false"></tag-create>
+    </v-dialog>
+    <v-dialog v-model="addFamilyMenu" max-width="350">
+        <family-create @close="addFamilyMenu = false"></family-create>
+    </v-dialog>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { useFileStore } from '@/store/file';
+import { storeToRefs } from 'pinia';
+import TagCreate from '@/components/upload_cards/TagCreate.vue';
+import FamilyCreate from '@/components/upload_cards/FamilyCreate.vue';
+import ActionButtons from '@/components/upload_cards/file_create/ActionButtons.vue';
+
+const fileStore = useFileStore();
+
+const emit = defineEmits(['close']);
+
+const form = ref(null);
+
+let formData = reactive({
+    label: '',
+    description: '',
+    file: null,
+    license: null,
+    family: null,
+    version: '',
+    tags: [],
+    legalShare: false,
+    userData: false,
+    openSource: false,
+});
+
+const showDetails = ref(false);
+
+let labelRules = [(v) => !!v || 'Label is required'];
+
+let descriptionRules = [
+    (v) => !!v || 'Description is required',
+    (v) => v.length <= 250 || 'Max 250 characters please',
+];
+
+let fileRules = [(v) => !!v || 'File is required'];
+
+let { licenses, tags, myOwnTags } = storeToRefs(fileStore);
+let licenseRules = [(v) => !!v || 'License is required'];
+
+let familyRules = [(v) => !!v || 'Family is required'];
+
+let checkboxRules = [(v) => !!v || 'Checkbox must be checked'];
+
+let gottenFamilies = ref([]);
+let gottenFiles = ref([]);
+
+let allVersions = ref([]);
+let latestFeatureModelVersion = ref(null);
+let numberOfModelsInFamily = ref(0);
+
+let versionRules = [(v) => !!v || 'Version is required'];
+
+let gottenTags = ref([]);
+let newTag = { label: '', description: '', is_public: false };
+
+let addTagMenu = ref(false);
+let addFamilyMenu = ref(false);
+
+watch(
+    () => formData.family,
+    (value) => {
+        console.log(getFeatureModelOfFamily(value));
+    }
+);
+
+async function getFeatureModelOfFamily(id) {
+    const res = await fileStore.fetchFeatureModelOfFamily(id);
+    console.log(res.length);
+    return res;
+}
+</script>
diff --git a/frontendVue3/src/main.js b/frontendVue3/src/main.js
new file mode 100644
index 00000000..80f0a640
--- /dev/null
+++ b/frontendVue3/src/main.js
@@ -0,0 +1,9 @@
+import App from "./App.vue";
+import { createApp } from "vue";
+import { registerPlugins } from "@/plugins";
+
+const app = createApp(App);
+
+registerPlugins(app);
+
+app.mount("#app");
diff --git a/frontendVue3/src/plugins/index.js b/frontendVue3/src/plugins/index.js
new file mode 100644
index 00000000..6b8ab74c
--- /dev/null
+++ b/frontendVue3/src/plugins/index.js
@@ -0,0 +1,9 @@
+import { loadFonts } from "./webfontloader";
+import vuetify from "./vuetify";
+import pinia from "../store";
+import router from "../router";
+
+export function registerPlugins(app) {
+  loadFonts();
+  app.use(vuetify).use(router).use(pinia);
+}
diff --git a/frontendVue3/src/plugins/vuetify.js b/frontendVue3/src/plugins/vuetify.js
new file mode 100644
index 00000000..f737f3f9
--- /dev/null
+++ b/frontendVue3/src/plugins/vuetify.js
@@ -0,0 +1,25 @@
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import { VDataTable } from 'vuetify/labs/VDataTable';
+
+export default createVuetify({
+    theme: {
+        defaultTheme: 'light',
+    },
+    components: {
+        VDataTable,
+    },
+});
+/*{
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+}*/
diff --git a/frontendVue3/src/plugins/webfontloader.js b/frontendVue3/src/plugins/webfontloader.js
new file mode 100644
index 00000000..d97d230f
--- /dev/null
+++ b/frontendVue3/src/plugins/webfontloader.js
@@ -0,0 +1,11 @@
+export async function loadFonts() {
+  const webFontLoader = await import(
+    /* webpackChunkName: "webfontloader" */ "webfontloader"
+  );
+
+  webFontLoader.load({
+    google: {
+      families: ["Roboto:100,300,400,500,700,900&display=swap"],
+    },
+  });
+}
diff --git a/frontendVue3/src/router/index.js b/frontendVue3/src/router/index.js
new file mode 100644
index 00000000..7574c6fe
--- /dev/null
+++ b/frontendVue3/src/router/index.js
@@ -0,0 +1,48 @@
+// Composables
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: () =>
+            import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        component: () =>
+            import(/* webpackChunkName: "home" */ '@/views/Login.vue'),
+    },
+    {
+        path: '/profile',
+        name: 'Profile',
+        component: () =>
+            import(/* webpackChunkName: "home" */ '@/views/Profile.vue'),
+    },
+    {
+        path: '/models',
+        name: 'Models',
+        component: () =>
+            import(/* webpackChunkName: "home" */ '@/views/Models.vue'),
+    },
+    {
+        path: '/histories',
+        name: 'Histories',
+        component: () =>
+            import(/* webpackChunkName: "home" */ '@/views/Histories.vue'),
+    },
+    {
+        path: '/dsgvo',
+        name: 'DSGVO',
+        component: () =>
+            import(/* webpackChunkName: "home" */ '@/views/DSGVO.vue'),
+    },
+];
+
+const router = createRouter({
+    history: createWebHistory(process.env.BASE_URL),
+    routes,
+});
+
+export default router;
diff --git a/frontendVue3/src/services/FeatureModel/collapse.service.js b/frontendVue3/src/services/FeatureModel/collapse.service.js
new file mode 100644
index 00000000..3c208559
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/collapse.service.js
@@ -0,0 +1,9 @@
+import * as update_service from '@/services/FeatureModel/update.service.js';
+
+// Collapses all children of the specified node with shortcut ALT + left-click.
+export function collapseShortcut(d3Data, event, d3Node) {
+    if (event.getModifierState('Alt')) {
+        d3Node.data.toggleCollapse();
+        update_service.updateSvg(d3Data);
+    }
+}
diff --git a/frontendVue3/src/services/FeatureModel/count.service.js b/frontendVue3/src/services/FeatureModel/count.service.js
new file mode 100644
index 00000000..c46a6551
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/count.service.js
@@ -0,0 +1,85 @@
+import * as d3 from 'd3'
+import * as CONSTANTS from '@/classes/constants'
+
+export function colorNodes(allNodes, coloringIndex) {
+	switch (coloringIndex) {
+		case 0:
+			coloring(allNodes, countNodes)
+			break
+		case 1:
+			coloring(allNodes, countDirectChildren)
+			break
+		case 2:
+			coloring(allNodes, countTotalChildren)
+			break
+		default:
+			resetColorNodes(allNodes)
+			break
+	}
+}
+
+function resetColorNodes(allNodes) {
+	for (const node of allNodes) {
+		node.colorValue = node.isAbstract
+			? CONSTANTS.NODE_ABSTRACT_COLOR
+			: CONSTANTS.NODE_COLOR
+	}
+}
+
+function coloring(allNodes, coloringFunction) {
+	const { count, max } = coloringFunction(allNodes) // Must return {"nodeName": integer}
+	const colors = d3
+		.scaleLinear()
+		.domain(d3.ticks(1, max, CONSTANTS.COLORING_MAP.length))
+		.range(CONSTANTS.COLORING_MAP)
+
+	for (const node of allNodes) {
+		if (count[node.d3Node.id] !== undefined && !node.isAbstract) {
+			node.colorValue = colors(count[node.d3Node.id])
+		}
+	}
+}
+
+/**
+ * Counts all nodes
+ * @returns {max: number, count: {}}
+ */
+function countNodes(allNodes) {
+	let count = {}
+	let max = 0
+	for (const node of allNodes) {
+		if (count[node.d3Node.id]) {
+			count[node.d3Node.id] += 1
+			max = max < count[node.d3Node.id] ? count[node.d3Node.id] : max
+		} else {
+			count[node.d3Node.id] = 1
+			max = max < count[node.d3Node.id] ? count[node.d3Node.id] : max
+		}
+	}
+
+	return { count: count, max: max }
+}
+
+function countDirectChildren(allNodes) {
+	let count = {}
+	let max = 0
+
+	for (const node of allNodes) {
+		count[node.d3Node.id] = node.childrenCount()
+		max = max < count[node.d3Node.id] ? count[node.d3Node.id] : max
+	}
+
+	return { count: count, max: max }
+}
+
+function countTotalChildren(allNodes) {
+	let count = {}
+	let max = 0
+
+	for (const node of allNodes) {
+		count[node.d3Node.id] = node.totalSubnodesCount()
+		max = max < count[node.d3Node.id] ? count[node.d3Node.id] : max
+	}
+
+	return { count: count, max: max }
+}
diff --git a/frontendVue3/src/services/FeatureModel/createPaths.service.js b/frontendVue3/src/services/FeatureModel/createPaths.service.js
new file mode 100644
index 00000000..5bf78a32
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/createPaths.service.js
@@ -0,0 +1,84 @@
+import * as CONSTANTS from "@/classes/constants";
+
+// Helper functions for drawing alternative-group and and-group paths
+const MOVE = 'M', LINE = 'L', ARC = 'A', CLOSE = 'Z';
+
+function polarToCartesian(point, radius, degrees) {
+    const rad = degrees * Math.PI / 180.0;
+    return {
+        x: point.x + (radius * Math.cos(rad)),
+        y: point.y + (radius * Math.sin(rad)),
+    };
+}
+
+function cartesianToAngle(centerPoint, point) {
+    return Math.atan2(point.y - centerPoint.y, point.x - centerPoint.x) * 180.0 / Math.PI;
+}
+
+function translateToPathD(...data) {
+    return data.join(' ');
+}
+
+function createPathDOfSegment(centerPoint, radius, startAngle, endAngle) {
+    const start = polarToCartesian(centerPoint, radius, startAngle);
+    const end = polarToCartesian(centerPoint, radius, endAngle);
+
+    const a = translateToPathD(MOVE, toPath(end), ARC, radius, radius, 0, 0, 1, toPath(start));
+    const b = translateToPathD(LINE, toPath(centerPoint), CLOSE);
+
+    return translateToPathD(a, b, CLOSE);
+}
+
+function toPath({x, y}) {
+    return `${x},${y}`;
+}
+
+export function createGroupSegmentHorizontally(d3Node, radius) {
+    const rectAnchor = {x: d3Node.x + d3Node.width, y: d3Node.y};
+    return createGroupSegment(d3Node, radius, rectAnchor);
+}
+
+export function createGroupSegmentVertically(d3Node, radius) {
+    const rectAnchor = {x: d3Node.x, y: d3Node.y + CONSTANTS.RECT_HEIGHT};
+    return createGroupSegment(d3Node, radius, rectAnchor);
+}
+
+function createGroupSegment(d3Node, radius, rectAnchor) {
+    if (d3Node.children && d3Node.children.length > 1) {
+
+        const firstChild = d3Node.children[0].isPseudoElement ? d3Node.children[1] : d3Node.children[0];
+        const lastChild = d3Node.children[d3Node.children.length - 1].isPseudoElement ? d3Node.children[d3Node.children.length - 2] : d3Node.children[d3Node.children.length - 1];
+
+        let startAngle = cartesianToAngle(rectAnchor, firstChild);
+        let endAngle = cartesianToAngle(rectAnchor, lastChild);
+        if (startAngle < endAngle) {
+            const tmp = startAngle;
+            startAngle = endAngle;
+            endAngle = tmp;
+        }
+        return createPathDOfSegment({x: 0, y: 0}, radius, startAngle, endAngle);
+    }
+
+    return null;
+}
+
+export function createLinkVertically(src, dest) {
+    const src_y = src.y + CONSTANTS.RECT_HEIGHT;
+    return `M ${src.x} ${src_y} L ${dest.x} ${dest.y}`;
+}
+
+export function createLinkHorizontally(src, dest) {
+    return `M ${src.x + src.width} ${src.y} L ${dest.x} ${dest.y}`;
+}
+
+export function calculateTriangle() {
+    const base = 35;
+
+    const h = Math.sin(60) * base;
+
+    const [ax, ay] = [-(base / 2), base / 2];
+    const [bx, by] = [base / 2, base / 2];
+    const [cx, cy] = [0, h];
+
+    return [`${ax},${ay}`, `${bx},${by}`, `${cx},${cy}`];
+}
diff --git a/frontendVue3/src/services/FeatureModel/dragAndDrop.service.js b/frontendVue3/src/services/FeatureModel/dragAndDrop.service.js
new file mode 100644
index 00000000..7cc5b62f
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/dragAndDrop.service.js
@@ -0,0 +1,248 @@
+import * as update from '@/services/FeatureModel/update.service.js';
+import * as CONSTANTS from '@/classes/constants';
+import * as d3 from 'd3';
+import {SwapCommand} from "@/classes/Commands/FeatureModel/SwapCommand";
+
+function overGhostNode(d3Data, ghostNode) {
+    d3Data.drag.selectedGhostNode = ghostNode;
+
+    // Highlight current ghostNode.
+    d3Data.container.dragContainer
+        .selectAll('circle.ghost-circle')
+        .data([ghostNode], gN => gN.d3Node.id + gN.side)
+        .classed('ghost-circle-highlighted', true);
+
+    // Uncollapse features.
+    if (ghostNode.side === 'b' && !ghostNode.d3Node.data.isLeaf()) {
+        setTimeout(() => {
+            if (d3Data.drag.selectedGhostNode === ghostNode) {
+                ghostNode.d3Node.data.uncollapse();
+                update.updateSvg(d3Data);
+                updateGhostCircles(d3Data);
+                translateD3NodeToMouse(d3Data, d3Data.drag.selectedD3Node);
+            }
+        }, 500);
+    }
+}
+
+function outGhostNode(d3Data) {
+    // Reset highlighting of current ghostNode.
+    if (d3Data.drag.selectedGhostNode) {
+        d3Data.container.dragContainer
+            .selectAll('circle.ghost-circle')
+            .data([d3Data.drag.selectedGhostNode], gN => gN.d3Node.id + gN.side)
+            .classed('ghost-circle-highlighted', false);
+    }
+
+    d3Data.drag.selectedGhostNode = null;
+}
+
+export function updateGhostCircles(d3Data) {
+    // Remove all children nodes under the current node and also the links between them.
+    const dragChildren = d3Data.drag.selectedD3Node.descendants();
+    d3Data.container.featureNodesContainer
+        .selectAll('g.node')
+        .data(dragChildren.slice(1), d3Node => d3Node.id)
+        .remove();
+    d3Data.container.linksContainer
+        .selectAll('path.link')
+        .data(dragChildren, d3Node => d3Node.id)
+        .remove();
+    d3Data.container.segmentsContainer
+        .selectAll('path')
+        .data(dragChildren, d3Node => d3Node.id)
+        .remove();
+
+    let dragNodes = [];
+    if (d3Data.semanticEditing) {
+        const allOtherNodes = d3Data.root
+            .descendants()
+            .slice(1)
+            .filter(node => !dragChildren.includes(node) && !d3Data.drag.selectedD3Node.children?.includes(node) && node !== d3Data.drag.selectedD3Node);
+
+        const rightGhostNodes = allOtherNodes.map(node => ({d3Node: node, side: 'r'}));
+        const leftGhostNodes = allOtherNodes
+            .filter(node => node === node.parent.children[0])
+            .map(node => ({
+                d3Node: node,
+                side: 'l',
+            }));
+
+        const bottomGhostNodes = allOtherNodes
+            .filter(node => node.data.isLeaf() || node.data.isCollapsed)
+            .map(node => ({
+                d3Node: node,
+                side: 'b',
+            }));
+
+        dragNodes = [...rightGhostNodes, ...leftGhostNodes, ...bottomGhostNodes];
+    }
+
+    // Siblings on the same level.
+    const leftGhostNodesOnSameLevel = d3Data.drag.selectedD3Node.data.getLeftSiblings().map(node => ({d3Node: node.d3Node, side: 'l'}));
+    const rightGhostNodesOnSameLevel = d3Data.drag.selectedD3Node.data.getRightSiblings().map(node => ({d3Node: node.d3Node, side: 'r'}));
+    dragNodes = [...dragNodes, ...leftGhostNodesOnSameLevel, ...rightGhostNodesOnSameLevel];
+    d3Data.drag.ghostNodes = dragNodes;
+
+    // Add ghost circles left and right to all nodes
+    const ghostCircles = d3Data.container.dragContainer
+        .selectAll('circle.ghost-circle')
+        .data(dragNodes, ghostNode => ghostNode.d3Node.id + ghostNode.side);
+
+    const ghostCirclesEnter = ghostCircles
+        .enter()
+        .append('circle')
+        .attr('r', d3Data.drag.mode === 'mouse' ? CONSTANTS.GHOST_NODE_RADIUS_MOUSE : CONSTANTS.GHOST_NODE_RADIUS_TOUCH)
+        .attr('ref', ghostNode => ghostNode.d3Node.id + ghostNode.side)
+        .classed('ghost-circle', true)
+        .on('mouseover', (_, ghostNode) => overGhostNode(d3Data, ghostNode))
+        .on('mouseout', () => outGhostNode(d3Data));
+
+    ghostCirclesEnter.merge(ghostCircles).attr('transform', ghostNode => calcGhostCircleTransform(d3Data, ghostNode));
+
+    ghostCircles.exit().remove();
+}
+
+function calcGhostCircleTransform(d3Data, ghostNode) {
+    const y = ghostNode.d3Node.y;
+    let dx = 0;
+
+    const x = ghostNode.d3Node.x;
+    let dy = 0;
+
+    if (d3Data.direction === 'v') {
+        switch (ghostNode.side) {
+            case 'l':
+                dx += ghostNode.d3Node.width / 2 + d3Data.spaceBetweenSiblings / 2;
+                dx *= -1;
+                dy = CONSTANTS.RECT_HEIGHT / 2;
+                break;
+            case 'r':
+                dx += ghostNode.d3Node.width / 2 + d3Data.spaceBetweenSiblings / 2;
+                dx *= 1;
+                dy = CONSTANTS.RECT_HEIGHT / 2;
+                break;
+            case 'b':
+                dy = CONSTANTS.RECT_HEIGHT;
+                break;
+            default:
+                dx = 0;
+                dy = 0;
+        }
+    } else {
+        switch (ghostNode.side) {
+            case 'l':
+                dy += CONSTANTS.RECT_HEIGHT / 2 + d3Data.spaceBetweenSiblings / 2 + 1;
+                dy *= -1;
+                break;
+            case 'r':
+                dy += CONSTANTS.RECT_HEIGHT / 2 + d3Data.spaceBetweenSiblings / 2 + 1;
+                dy *= 1;
+                break;
+            case 'b':
+                dx = ghostNode.d3Node.width;
+                break;
+            default:
+                dx = 0;
+                dy = 0;
+        }
+    }
+    return `translate(${x + dx}, ${y + dy})`;
+}
+
+export function init(d3Data, commandManager) {
+    d3Data.drag.listener = d3
+        .drag()
+        .on('start', (_, d3Node) => {
+            if (!commandManager.collaborationManager.featureModel.editRights || d3Node === d3Data.root) {
+                return;
+            }
+            d3Data.drag.selectedD3Node = d3Node;
+            d3Data.drag.hasStarted = true;
+        })
+        .on('drag', (event, d3Node) => {
+            if (!commandManager.collaborationManager.featureModel.editRights || d3Node === d3Data.root) {
+                return;
+            }
+
+            if (d3Data.drag.hasStarted) {
+                d3Data.drag.mode = event.sourceEvent instanceof MouseEvent ? 'mouse' : 'touch';
+                d3Node.data.parent.unhideChildren();
+                d3Node.data.collapse();
+
+                // Get all nodes to root without root.
+                d3Node.data.getAllNodesToRoot().slice(1).forEach(node => {
+                    node.unhideChildren();
+                });
+
+                update.updateSvg(d3Data);
+
+                updateGhostCircles(d3Data);
+                d3Data.drag.hasStarted = false;
+            }
+
+            d3Data.drag.selectedD3NodePosition = {x: event.x, y: event.y};
+            translateD3NodeToMouse(d3Data, d3Node);
+        })
+        .on('end', (_, d3Node) => {
+            if (d3Node === d3Data.root) {
+                return;
+            }
+            const nodeSelection = d3Data.container.featureNodesContainer.selectAll('g.node').data([d3Node], d => d.id);
+            nodeSelection.select('g.rect-and-text').attr('pointer-events', 'all');
+
+            // Remove ghost circles.
+            d3Data.container.dragContainer.selectAll('circle.ghost-circle').remove();
+
+            const ghost = d3Data.drag.selectedGhostNode;
+
+            if (ghost) {
+                let dstParent = null;
+                let dstIndex = null;
+                let valid = false;
+                if (ghost.side === 'l' || ghost.side === 'r') {
+                    const dIndex = ghost.side === 'l' ? 0 : 1;
+                    dstIndex = ghost.d3Node.data.parent.children.indexOf(ghost.d3Node.data) + dIndex;
+                    dstParent = ghost.d3Node.data.parent;
+
+                    valid = true;
+                } else if (ghost.side === 'b' && ghost.d3Node.data.isLeaf()) {
+                    dstIndex = 0;
+                    dstParent = ghost.d3Node.data;
+                    valid = true;
+                }
+
+                if (valid) {
+                    const swapCommand = new SwapCommand(
+                        d3Node.data,
+                        dstParent,
+                        dstIndex,
+                    );
+                    commandManager.execute(swapCommand);
+                }
+
+                d3Data.drag.selectedGhostNode = null;
+                d3Data.drag.ghostNodes = [];
+            }
+
+            update.updateSvg(d3Data);
+        });
+}
+
+function translateD3NodeToMouse(d3Data, d3Node) {
+    d3Data.container.featureNodesContainer
+        .selectAll('g.node')
+        .data([d3Node], d => d.id)
+        .attr('transform', `translate(${d3Data.drag.selectedD3NodePosition.x}, ${d3Data.drag.selectedD3NodePosition.y})`);
+}
+
+export function ghostNodeTouchMove(event, d3Data) {
+    const htmlElement = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
+    const ghostNodeRef = htmlElement.getAttribute('ref');
+    if (ghostNodeRef) {
+        const ghostNode = d3Data.drag.ghostNodes.find(gN => gN.d3Node.id + gN.side === ghostNodeRef);
+        overGhostNode(d3Data, ghostNode);
+    } else {
+        outGhostNode(d3Data);
+    }
+}
diff --git a/frontendVue3/src/services/FeatureModel/init.service.js b/frontendVue3/src/services/FeatureModel/init.service.js
new file mode 100644
index 00000000..bc763ee6
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/init.service.js
@@ -0,0 +1,76 @@
+import { flextree } from 'd3-flextree';
+import * as CONSTANTS from '@/classes/constants';
+import * as d3 from 'd3';
+import * as windowResize from '@/services/FeatureModel/windowResize.service.js';
+
+export function initData(d3Data, data) {
+    // Create root-feature-node with d3 and the data of the feature-model.
+    d3Data.root = d3.hierarchy(data, (node) => node.children);
+    d3Data.root.each((d3Node) => (d3Node.data.d3Node = d3Node));
+}
+
+export function initialize(d3Data, data) {
+    // Flexlayout belongs to a d3-plugin that calculates the width between all nodes dynamically.
+    d3Data.flexlayout = flextree()
+        .nodeSize((d3Node) => calcNodeSize(d3Data, d3Node))
+        .spacing((d3NodeA, d3NodeB) => d3NodeA.path(d3NodeB).length);
+
+    initData(d3Data, data);
+
+    d3Data.zoom = d3
+        .zoom()
+        //.scaleExtent([0.1, 8])
+        .on('zoom', (event) => svgContent.attr('transform', event.transform));
+
+    // Create svg-container.
+    const svg = d3
+        .select('#svg-container')
+        .append('svg')
+        .attr('preserveAspectRatio', 'xMidYMid meet')
+        .call(d3Data.zoom) // Zooming and penning.
+        .on('dblclick.zoom', null);
+
+    const svgContent = svg.append('g');
+
+    d3Data.container.highlightedConstraintsContainer = svgContent
+        .append('g')
+        .classed('highlighted-constraints-container', true);
+
+    d3Data.container.linksContainer = svgContent
+        .append('g')
+        .classed('link-container', true);
+
+    d3Data.container.segmentsContainer = svgContent
+        .append('g')
+        .classed('segments-container', true);
+
+    d3Data.container.featureNodesContainer = svgContent
+        .append('g')
+        .classed('feature-node-container', true);
+
+    d3Data.container.dragContainer = svgContent
+        .append('g')
+        .classed('drag-container', true);
+
+    // Listen to window resize.
+    window.onresize = () => windowResize.update(d3Data);
+    windowResize.update(d3Data);
+}
+
+function calcNodeSize(d3Data, d3Node) {
+    let width, height;
+    switch (d3Data.direction) {
+        case 'v':
+            width = d3Node.width + d3Data.spaceBetweenSiblings;
+            height = CONSTANTS.RECT_HEIGHT + d3Data.spaceBetweenParentChild;
+            break;
+        case 'h':
+            width = CONSTANTS.RECT_HEIGHT + d3Data.spaceBetweenSiblings;
+            height =
+                d3Data.maxHorizontallyLevelWidth[d3Node.data.level()] +
+                d3Data.spaceBetweenParentChild;
+            break;
+    }
+
+    return [width, height];
+}
diff --git a/frontendVue3/src/services/FeatureModel/search.service.js b/frontendVue3/src/services/FeatureModel/search.service.js
new file mode 100644
index 00000000..cf2de80e
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/search.service.js
@@ -0,0 +1,42 @@
+import levenshtein from 'js-levenshtein';
+import * as view from "@/services/FeatureModel/view.service.js";
+import * as update from '@/services/FeatureModel/update.service.js';
+
+export function resetSearch(d3Data) {
+    d3Data.root.data.each(node => {
+        node.isSearched = false;
+        node.collapse();
+    });
+
+    view.reset(d3Data);
+}
+
+export function markNodeAsSearched(d3Data, foundNode) {
+    resetSearch(d3Data);
+
+    foundNode.getAllNodesToRoot().forEach(node => node.isSearched = true);
+    foundNode.uncollapse(true);
+
+    update.updateSvg(d3Data);
+    view.zoomFit(d3Data);
+    view.focusNode(d3Data, foundNode.d3Node);
+}
+
+export function search(d3Data, searchText) {
+    if (!searchText || searchText === '') {
+        return [];
+    }
+
+    return d3Data.root.data
+        .descendants()
+        .map(node => {
+            const currentNodeName = node.name.toLowerCase();
+            if (currentNodeName !== searchText.toLowerCase() && currentNodeName.includes(searchText.toLowerCase())) {
+                return {node: node, distance: 1};
+            }
+
+            return {node: node, distance: levenshtein(node.name.toLowerCase(), searchText.toLowerCase())};
+        })
+        .filter(d => d.distance <= 2)
+        .sort((a, b) => a.distance - b.distance);
+}
diff --git a/frontendVue3/src/services/FeatureModel/update.service.js b/frontendVue3/src/services/FeatureModel/update.service.js
new file mode 100644
index 00000000..c6c946e2
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/update.service.js
@@ -0,0 +1,558 @@
+import * as createPaths from '@/services/FeatureModel/createPaths.service.js';
+import * as CONSTANTS from '@/classes/constants';
+import * as collapse from '@/services/FeatureModel/collapse.service.js';
+import { FeatureNode } from '@/classes/FeatureNode';
+import { PseudoNode } from '@/classes/PseudoNode';
+import * as count from '@/services/FeatureModel/count.service';
+import { ghostNodeTouchMove } from '@/services/FeatureModel/dragAndDrop.service';
+import { RECT_HEIGHT } from '@/classes/constants';
+
+function updateFeatureNodes(d3Data, visibleD3Nodes) {
+    const featureNode = d3Data.container.featureNodesContainer
+        .selectAll('g.node')
+        .data(
+            visibleD3Nodes.filter(
+                (d3Node) => d3Node.data instanceof FeatureNode
+            ),
+            (d3Node) => d3Node.id || (d3Node.id = ++d3Data.nodeIdCounter)
+        );
+
+    // Enter new nodes
+    const featureNodeEnter = featureNode
+        .enter()
+        .append('g')
+        .classed('node', true)
+        .call(d3Data.drag.listener)
+        // Highlight and reset highlighting of ghost-nodes during drag and drop of feature-nodes.
+        .on('touchmove', (event) => ghostNodeTouchMove(event, d3Data), true)
+        // Open contextmenu with right-click on d3Node.
+        .on('contextmenu', (event, d3Node) => {
+            // only use contextmenu on non-mobile devices
+            if (!('ontouchstart' in window)) {
+                event.preventDefault();
+                d3Data.contextMenu.selectedD3Node = d3Node;
+                d3Data.contextMenu.event = event;
+            } else {
+                event.preventDefault();
+            }
+        })
+        // Toggle collapsing on double-clock on feature-node.
+        .on('click', (event, d3Node) => {
+            // Use click for contextmenu on mobile
+            if ('ontouchstart' in window) {
+                d3Data.contextMenu.selectedD3Node = d3Node;
+                d3Data.contextMenu.event = event;
+            }
+            dblClickEvent(event, d3Data, d3Node);
+            collapse.collapseShortcut(d3Data, event, d3Node); // Collapse d3Node with Ctrl + left-click on d3Node.
+        });
+
+    const rectAndTextEnter = featureNodeEnter
+        .append('g')
+        .classed('rect-and-text', true);
+    rectAndTextEnter.append('rect').attr('height', CONSTANTS.RECT_HEIGHT);
+    rectAndTextEnter
+        .append('text')
+        .attr('font-size', CONSTANTS.FEATURE_FONT_SIZE);
+
+    featureNodeEnter
+        .append('circle')
+        .classed('and-group-circle', true)
+        .attr('r', CONSTANTS.MANDATORY_CIRCLE_RADIUS);
+
+    // Update nodes
+    const featureNodeUpdate = featureNodeEnter.merge(featureNode);
+    featureNodeUpdate.attr(
+        'transform',
+        (d3Node) => `translate(${d3Node.x}, ${d3Node.y})`
+    );
+    featureNodeUpdate
+        .select('.and-group-circle')
+        .classed(
+            'mandatory-and-group-circle',
+            (d3Node) =>
+                d3Node.parent &&
+                d3Node.parent.data.isAnd() &&
+                d3Node.data.isMandatory
+        )
+        .classed(
+            'optional-and-group-circle',
+            (d3Node) =>
+                d3Node.parent &&
+                d3Node.parent.data.isAnd() &&
+                !d3Node.data.isMandatory
+        );
+
+    const rectAndTextUpdate = featureNodeUpdate.select('.rect-and-text');
+    rectAndTextUpdate
+        .select('rect')
+        .classed('is-searched-feature', (d3Node) => d3Node.data.isSearched)
+        .attr('fill', (d3Node) => d3Node.data.color())
+        .attr('x', (d3Node) =>
+            d3Data.direction === 'v' ? -d3Node.width / 2 : 0
+        )
+        .attr('y', d3Data.direction === 'v' ? 0 : -CONSTANTS.RECT_HEIGHT / 2)
+        .attr('width', (d3Node) => d3Node.width);
+    rectAndTextUpdate
+        .select('text')
+        .attr('font-style', (d3Node) =>
+            d3Node.data.isAbstract ? 'italic' : 'normal'
+        )
+        .attr(
+            'dy',
+            d3Data.direction === 'v' ? CONSTANTS.RECT_HEIGHT / 2 + 5.5 : 5.5
+        )
+        .attr('x', d3Data.direction === 'v' ? 0 : (d3Node) => d3Node.width / 2)
+        .classed('whiteText', (d3Node) => {
+            let color = d3Node.data.color();
+            const rgb = color.replace(/[^\d,]/g, '').split(',');
+            return rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 <= 186;
+        })
+        .text((d3Node) =>
+            d3Data.isShortenedName ? d3Node.data.displayName : d3Node.data.name
+        );
+
+    // Remove old/invisible nodes.
+    featureNode.exit().remove();
+
+    featureNodeEnter.append('g').classed('children-count-container', true);
+    featureNodeEnter.append('g').classed('quick-edit-actions-container', true);
+
+    updateChildrenCount(d3Data, featureNodeUpdate);
+    updateQuickEditActions(d3Data, featureNodeUpdate);
+}
+
+function updateQuickEditActions(d3Data, featureNodeUpdate) {
+    const quickEditActions = featureNodeUpdate
+        .select('g.quick-edit-actions-container')
+        .selectAll('g.quick-edit-actions')
+        .data(
+            (d) => (d3Data.quickEdit && d3Data.featureModelTree.editRights ? [d] : []),
+            (d) => d.data.id
+        );
+
+    const quickEditActionsEnter = quickEditActions
+        .enter()
+        .append('g')
+        .classed('quick-edit-actions', true);
+    const quickEditActionsUpdate =
+        quickEditActionsEnter.merge(quickEditActions);
+
+    // Bottom circle
+    const bottomEnter = quickEditActionsEnter
+        .append('g')
+        .classed('quick-edit-action-child', true)
+        .on('click', (e, d3Node) => {
+            e.stopPropagation();
+            d3Data.d3AddNodeIndex = d3Node.data.children.length;
+            d3Data.featureModelTree.openAddAsChildDialog(d3Node);
+        });
+    drawQuickEditGroup(bottomEnter);
+    quickEditActionsUpdate
+        .select('g.quick-edit-action-child')
+        .attr('transform', (d3Node) =>
+            d3Data.direction === 'v'
+                ? `translate(0, ${RECT_HEIGHT})`
+                : `translate(${d3Node.width}, 0)`
+        );
+
+    // Left side circle
+    const leftEnter = quickEditActionsEnter
+        .filter((d3Node) => !d3Node.data.isRoot)
+        .append('g')
+        .classed('quick-edit-action-left', true)
+        .on('click', (e, d3Node) => {
+            e.stopPropagation();
+            d3Data.d3AddNodeIndex = d3Node.data.parent.children.indexOf(
+                d3Node.data
+            );
+            d3Data.featureModelTree.openAddAsSiblingDialog(d3Node);
+        });
+    drawQuickEditGroup(leftEnter);
+    quickEditActionsUpdate
+        .select('g.quick-edit-action-left')
+        .attr('transform', (d3Node) =>
+            d3Data.direction === 'v'
+                ? `translate(${-d3Node.width / 2}, ${RECT_HEIGHT / 2})`
+                : `translate(${d3Node.width / 2}, -${RECT_HEIGHT / 2})`
+        );
+
+    // Right side circle
+    const rightEnter = quickEditActionsEnter
+        .filter((d3Node) => !d3Node.data.isRoot)
+        .append('g')
+        .classed('quick-edit-action-right', true)
+        .on('click', (e, d3Node) => {
+            e.stopPropagation();
+            d3Data.d3AddNodeIndex =
+                d3Node.data.parent.children.indexOf(d3Node.data) + 1;
+            d3Data.featureModelTree.openAddAsSiblingDialog(d3Node);
+        });
+    drawQuickEditGroup(rightEnter);
+    quickEditActionsUpdate.select('g.quick-edit-action-right').attr(
+        'transform',
+        (d3Node) => `
+    translate(${d3Node.width / 2}, ${RECT_HEIGHT / 2})`
+    );
+
+    quickEditActions.exit().remove();
+}
+
+function drawQuickEditGroup(d3Element) {
+    // Enlarge on mobile
+    const radius =
+        'ontouchstart' in window
+            ? CONSTANTS.QUICK_EDIT_RADIUS * 1.75
+            : CONSTANTS.QUICK_EDIT_RADIUS;
+    d3Element.append('circle').attr('fill', '#4caf50').attr('r', radius);
+    d3Element
+        .append('path')
+        .attr(
+            'd',
+            `M -0.5 ${-(2 * radius) / 3} h 1 v ${(4 * radius) / 3} h -1 z`
+        )
+        .attr('fill', 'white');
+    d3Element
+        .append('path')
+        .attr(
+            'd',
+            `M ${-(2 * radius) / 3} -0.5 v 1 h ${(4 * radius) / 3} v -1 z`
+        )
+        .attr('fill', 'white');
+}
+
+function updateChildrenCount(d3Data, featureNodeUpdate) {
+    // Enter triangle with number of direct and total children.
+    const childrenCount = featureNodeUpdate
+        .select('g.children-count-container')
+        .selectAll('g.children-count')
+        .data(
+            (d) => (d.data.isLeaf() || !d.data.isCollapsed ? [] : [d]),
+            (d) => d.id
+        );
+
+    const childrenCountEnter = childrenCount
+        .enter()
+        .append('g')
+        .classed('children-count', true);
+    childrenCountEnter
+        .append('polygon')
+        .attr('fill', 'white')
+        .attr('points', createPaths.calculateTriangle());
+    childrenCountEnter
+        .append('text')
+        .classed('children-count-text', true)
+        .classed('direct-children', true)
+        .attr('dy', 5)
+        .attr('font-size', CONSTANTS.CHILDREN_COUNT_FONT_SIZE);
+    childrenCountEnter
+        .append('text')
+        .classed('children-count-text', true)
+        .classed('total-children', true)
+        .attr('dy', 15)
+        .attr('font-size', CONSTANTS.CHILDREN_COUNT_FONT_SIZE);
+
+    const childrenCountUpdate = childrenCountEnter.merge(childrenCount);
+    childrenCountUpdate.attr('transform', (d3Node) => {
+        const x = d3Data.direction === 'v' ? 0 : d3Node.width + 10;
+        const y =
+            d3Data.direction === 'v'
+                ? CONSTANTS.RECT_HEIGHT + 10
+                : -CONSTANTS.RECT_HEIGHT / 8;
+        return `
+    translate(${x}, ${y})`;
+    });
+    childrenCountUpdate
+        .selectAll('text.direct-children')
+        .text((d3Node) => d3Node.data.childrenCount());
+    childrenCountUpdate
+        .selectAll('text.total-children')
+        .text((d3Node) => d3Node.data.totalSubnodesCount());
+
+    childrenCount.exit().remove();
+}
+
+function updatePseudoNodes(d3Data, visibleD3Nodes) {
+    const pseudoNode = d3Data.container.featureNodesContainer
+        .selectAll('g.pseudo-node')
+        .data(
+            visibleD3Nodes.filter(
+                (d3Node) => d3Node.data instanceof PseudoNode
+            ),
+            (d3Node) => d3Node.id || (d3Node.id = ++d3Data.nodeIdCounter)
+        );
+    const pseudoNodeEnter = pseudoNode
+        .enter()
+        .append('g')
+        .classed('pseudo-node', true)
+        .on('click', (_, d3Node) => {
+            d3Node.data.unhideHiddenNodes();
+            updateSvg(d3Data);
+        });
+    pseudoNodeEnter.append('circle').attr('r', CONSTANTS.PSEUDO_NODE_SIZE);
+    pseudoNodeEnter
+        .append('text')
+        .attr('font-size', 30)
+        .attr('dy', 2)
+        .attr('dx', -12)
+        .text('...');
+
+    const pseudoNodeUpdate = pseudoNodeEnter.merge(pseudoNode);
+    pseudoNodeUpdate.attr('transform', (d3Node) => {
+        let dx = d3Node.x;
+        let dy = d3Node.y;
+        if (d3Data.direction === 'v') {
+            dy += CONSTANTS.RECT_HEIGHT / 2;
+        } else {
+            dx += d3Node.width / 2;
+        }
+        return `
+    translate(${dx}, ${dy})`;
+    });
+
+    pseudoNode.exit().remove();
+}
+
+function updateHighlightedConstraints(d3Data, visibleD3Nodes) {
+    const highlightedNodes = visibleD3Nodes
+        .filter((d3Node) => d3Node.data instanceof FeatureNode)
+        .map((d3Node) => ({
+            d3Node: d3Node,
+            highlightedConstraints: d3Node.data.getHighlightedConstraints(),
+        }))
+        .filter((d) => d.highlightedConstraints.length);
+
+    const highlightedConstraintNodes =
+        d3Data.container.highlightedConstraintsContainer
+            .selectAll('g.highlighted-constraints')
+            .data(
+                highlightedNodes,
+                (d) => d.d3Node.id || (d.d3Node.id = ++d3Data.nodeIdCounter)
+            );
+
+    const highlightedConstraintNodesEnter = highlightedConstraintNodes
+        .enter()
+        .append('g')
+        .classed('highlighted-constraints', true);
+
+    const highlightedConstraintNodeRects = highlightedConstraintNodesEnter
+        .merge(highlightedConstraintNodes)
+        .selectAll('rect')
+        .data(
+            (d) =>
+                d.highlightedConstraints.map((c) => ({
+                    constraint: c,
+                    d3Node: d.d3Node,
+                })),
+            (d) => d.constraint.toString() + d.d3Node.id
+        );
+
+    // Enter highlighted constraint rects
+    const highlightedConstraintNodeRectsEnter = highlightedConstraintNodeRects
+        .enter()
+        .append('rect')
+        .attr('stroke', (json) => json.constraint.color)
+        .attr('stroke-width', CONSTANTS.STROKE_WIDTH_CONSTANT)
+        .attr('fill', 'transparent');
+
+    // Update highlighted constraint rects
+    highlightedConstraintNodeRectsEnter
+        .merge(highlightedConstraintNodeRects)
+        .attr('x', (constraint) =>
+            d3Data.direction === 'v' ? -constraint.d3Node.width / 2 : 0
+        )
+        .attr('y', d3Data.direction === 'v' ? 0 : -CONSTANTS.RECT_HEIGHT / 2)
+        .attr(
+            'height',
+            (_, i) =>
+                CONSTANTS.RECT_HEIGHT +
+                i * 2 * CONSTANTS.STROKE_WIDTH_CONSTANT +
+                CONSTANTS.STROKE_WIDTH_CONSTANT
+        )
+        .attr(
+            'width',
+            (constraint, i) =>
+                constraint.d3Node.width +
+                i * 2 * CONSTANTS.STROKE_WIDTH_CONSTANT +
+                CONSTANTS.STROKE_WIDTH_CONSTANT
+        )
+        .attr(
+            'transform',
+            (json, i) => `
+    translate(${
+        json.d3Node.x -
+        i * CONSTANTS.STROKE_WIDTH_CONSTANT -
+        CONSTANTS.STROKE_WIDTH_CONSTANT / 2
+    },
+        ${
+            json.d3Node.y -
+            i * CONSTANTS.STROKE_WIDTH_CONSTANT -
+            CONSTANTS.STROKE_WIDTH_CONSTANT / 2
+        })`
+        );
+
+    // Remove constraints highlighted nodes
+    highlightedConstraintNodes.exit().remove();
+    highlightedConstraintNodeRects.exit().remove();
+}
+
+function updateLinks(d3Data, visibleD3Nodes) {
+    const links = visibleD3Nodes
+        .slice(1)
+        .filter((d3Node) => d3Node.data instanceof FeatureNode);
+    const link = d3Data.container.linksContainer
+        .selectAll('path.link')
+        .data(links, (d3Node) => d3Node.id);
+
+    const linkEnter = link.enter().insert('path', 'g').classed('link', true);
+
+    const linkUpdate = linkEnter.merge(link);
+    linkUpdate
+        .classed('is-searched-link', (d3Node) => d3Node.data.isSearched)
+        .attr('d', (d3Node) => {
+            if (d3Data.direction === 'v') {
+                return createPaths.createLinkVertically(d3Node.parent, d3Node);
+            } else {
+                return createPaths.createLinkHorizontally(
+                    d3Node.parent,
+                    d3Node
+                );
+            }
+        });
+
+    link.exit().remove();
+}
+
+function updateColoring(d3Data) {
+    const allNodes = d3Data.root.data.descendants();
+    count.colorNodes(allNodes, d3Data.coloringIndex);
+}
+
+function updateSegments(d3Data, visibleD3Nodes) {
+    const segment = d3Data.container.segmentsContainer
+        .selectAll('path.segment')
+        .data(
+            visibleD3Nodes.filter(
+                (d3Node) =>
+                    d3Node.data instanceof FeatureNode &&
+                    (d3Node.data.isAlt() || d3Node.data.isOr())
+            ),
+            (d3Node) => d3Node.id || (d3Node.id = ++d3Data.nodeIdCounter)
+        );
+
+    const segmentEnter = segment
+        .enter()
+        .append('path')
+        .classed('segment', true);
+
+    // Segment update.service.js
+    segmentEnter
+        .merge(segment)
+        .classed('alt-group', (d3Node) => d3Node.data.isAlt())
+        .classed('or-group', (d3Node) => d3Node.data.isOr())
+        .attr('d', (d3Node) => {
+            if (d3Data.direction === 'h') {
+                return createPaths.createGroupSegmentHorizontally(
+                    d3Node,
+                    CONSTANTS.GROUP_SEGMENT_RADIUS
+                );
+            } else {
+                return createPaths.createGroupSegmentVertically(
+                    d3Node,
+                    CONSTANTS.GROUP_SEGMENT_RADIUS
+                );
+            }
+        })
+        .attr('transform', (d3Node) => {
+            let dx = d3Node.x;
+            let dy = d3Node.y;
+            if (d3Data.direction === 'h') {
+                dx += d3Node.width;
+            } else {
+                dy += CONSTANTS.RECT_HEIGHT;
+            }
+            return `
+    translate(${dx}, ${dy})`;
+        });
+
+    segment.exit().remove();
+}
+
+export function updateSvg(d3Data) {
+    /*const start = performance.now();*/
+
+    // Calculate rect widths of all d3Nodes once for better performance instead of repeatedly during update.
+    d3Data.root.descendants().forEach((d3Node) => {
+        d3Node.width = calcRectWidth(d3Data, d3Node);
+
+        if (d3Node.data instanceof FeatureNode) {
+            const level = d3Node.data.level();
+            if (d3Data.maxHorizontallyLevelWidth.length <= level) {
+                d3Data.maxHorizontallyLevelWidth.push(0);
+            }
+
+            if (d3Data.maxHorizontallyLevelWidth[level] < d3Node.width) {
+                d3Data.maxHorizontallyLevelWidth[level] = d3Node.width;
+            }
+        }
+    });
+
+    // Flexlayout belongs to a d3-plugin that calculates the width between all nodes dynamically.
+    const visibleD3Nodes = d3Data.flexlayout(d3Data.root).descendants();
+
+    // Swap x and y to draw from left to right instead of drawing from top to bottom
+    if (d3Data.direction === 'h') {
+        visibleD3Nodes.forEach((d3Node) => {
+            const x = d3Node.x;
+            d3Node.x = d3Node.y;
+            d3Node.y = x;
+        });
+    }
+
+    updateColoring(d3Data);
+    updateHighlightedConstraints(d3Data, visibleD3Nodes);
+    updateSegments(d3Data, visibleD3Nodes);
+    updateFeatureNodes(d3Data, visibleD3Nodes);
+    updatePseudoNodes(d3Data, visibleD3Nodes);
+    updateLinks(d3Data, visibleD3Nodes);
+
+    /*console.log('Rendertime', performance.now() - start);*/
+}
+
+// Calculates rect-width dependent on font-size dynamically.
+export function calcRectWidth(d3Data, d3Node) {
+    if (d3Node.data instanceof FeatureNode) {
+        return (
+            (d3Data.isShortenedName
+                ? d3Node.data.displayName.length
+                : d3Node.data.name.length) *
+                (CONSTANTS.FEATURE_FONT_SIZE *
+                    CONSTANTS.MONOSPACE_HEIGHT_WIDTH_FACTOR) +
+            CONSTANTS.RECT_MARGIN.left +
+            CONSTANTS.RECT_MARGIN.right
+        );
+    } else {
+        return CONSTANTS.PSEUDO_NODE_SIZE * 2;
+    }
+}
+
+let touchtime = 0;
+
+function dblClickEvent(event, d3Data, d3Node) {
+    if (touchtime === 0) {
+        // set first click
+        touchtime = new Date().getTime();
+    } else {
+        // compare first click to this click and see if they occurred within double click threshold
+        if (new Date().getTime() - touchtime < 300) {
+            // double click occurred
+            event.preventDefault();
+            d3Node.data.toggleCollapse();
+            updateSvg(d3Data);
+            touchtime = 0;
+        } else {
+            // not a double click so set as a new first click
+            touchtime = new Date().getTime();
+        }
+    }
+}
diff --git a/frontendVue3/src/services/FeatureModel/view.service.js b/frontendVue3/src/services/FeatureModel/view.service.js
new file mode 100644
index 00000000..3b55f7e5
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/view.service.js
@@ -0,0 +1,49 @@
+import * as d3 from "d3";
+import * as update from '@/services/FeatureModel/update.service.js';
+
+export function reset(d3Data, uncollapsedLevels = 4, maxChildrenCount = 3) {
+    // Collapses all nodes after depth 1.
+    d3Data.root.data.each(node => node.collapse());
+
+    let currentChildren = [d3Data.root.data];
+    for (let i = 1; i <= uncollapsedLevels; i++) {
+        currentChildren.forEach(child => {
+            if (child.children.length <= maxChildrenCount) {
+                child.uncollapse(false);
+            }
+        });
+        currentChildren = currentChildren
+            .map(parent => parent.children.length <= maxChildrenCount ? parent.children : [])
+            .flat();
+
+        if (currentChildren.length === 0) {
+            break;
+        }
+    }
+
+    update.updateSvg(d3Data);
+    zoomFit(d3Data);
+}
+
+export function zoomFit(d3Data, padding = 0.75) {
+    let bounds = document.querySelector('svg > g').getBBox();
+    let fullWidth = document.querySelector('svg').getBoundingClientRect().width,
+        fullHeight = document.querySelector('svg').getBoundingClientRect().height;
+    let width = bounds.width,
+        height = bounds.height;
+    let midX = bounds.x + width / 2,
+        midY = bounds.y + height / 2;
+
+    // nothing to fit
+    if (width === 0 || height === 0) {
+        return;
+    }
+
+    let scale = padding / Math.max(width / fullWidth, height / fullHeight);
+
+    d3.select('svg').call(d3Data.zoom.translateTo, midX, midY).call(d3Data.zoom.scaleTo, scale);
+}
+
+export function focusNode(d3Data, d3Node) {
+    d3.select('svg').call(d3Data.zoom.translateTo, d3Node.x, d3Node.y);
+}
diff --git a/frontendVue3/src/services/FeatureModel/windowResize.service.js b/frontendVue3/src/services/FeatureModel/windowResize.service.js
new file mode 100644
index 00000000..ebb4b8d1
--- /dev/null
+++ b/frontendVue3/src/services/FeatureModel/windowResize.service.js
@@ -0,0 +1,15 @@
+import * as view from '@/services/FeatureModel/view.service.js';
+import * as d3 from 'd3';
+
+export function update(d3Data) {
+    d3.select('#svg-container')
+        .style('height', window.innerHeight - 100);
+
+    d3.select('#svg-container > svg')
+        .attr(
+            'viewBox',
+            `0 0 ${window.innerWidth} ${window.innerHeight - 64}`,
+        );
+
+    view.zoomFit(d3Data);
+}
diff --git a/frontendVue3/src/services/api.service.js b/frontendVue3/src/services/api.service.js
new file mode 100644
index 00000000..e5a1625b
--- /dev/null
+++ b/frontendVue3/src/services/api.service.js
@@ -0,0 +1,68 @@
+import axios from 'axios';
+import authService from './auth.service';
+
+const API_URL = process.env.VITE_APP_DOMAIN;
+
+// axios instance for checking if token is (still) valid.
+const instance = axios.create({
+    baseURL: API_URL,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+// Send the authorization header with every request, but only if auth code exists (Client -> Server)
+// Enhance all requests to server with auth header
+instance.interceptors.request.use(
+    (config) => {
+        const token = authService.getAccessToken();
+        const changeConfig = config;
+        if (token && changeConfig.headers) {
+            changeConfig.headers.Authorization = `Bearer ${token}`;
+        }
+
+        return changeConfig;
+    },
+    // In case there is an error just pipe it through to the appropriate handler
+    (error) => Promise.reject(error)
+);
+
+// Look at every answer from the API, in case it is unauthorized
+// get another access token with the refresh token (Server -> Client)
+instance.interceptors.response.use(
+    // A fine response remains untouched
+    (res) => res,
+    async (error) => {
+        const originalRequest = error.config;
+
+        // Access key expired
+        if (error.response && error.response.status === 401) {
+            try {
+                // Use axios not an instance to prevent infinite loops
+                const response = await axios.post(`${API_URL}auth/refresh/`, {
+                    refresh: authService.getRefreshToken(),
+                });
+
+                const accessToken = response.data.access;
+                localStorage.setItem('access', JSON.stringify(accessToken));
+
+                return instance(originalRequest);
+            } catch (responseError) {
+                // Refresh Token is also not valid anymore -> return to login
+                // Also save the previously surfed URL to relocate to when logged in
+                localStorage.setItem(
+                    'previousURL',
+                    `${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.search}`
+                );
+
+                authService.logout();
+                window.location.replace('/login');
+                return Promise.reject(error);
+            }
+        } else {
+            return Promise.reject(error);
+        }
+    }
+);
+
+export default instance;
diff --git a/frontendVue3/src/services/auth.service.js b/frontendVue3/src/services/auth.service.js
new file mode 100644
index 00000000..7d329fde
--- /dev/null
+++ b/frontendVue3/src/services/auth.service.js
@@ -0,0 +1,68 @@
+import axios from 'axios';
+
+const API_URL = `${import.meta.env.VITE_APP_DOMAIN}auth/`;
+
+class AuthService {
+    login(email, password) {
+        return axios
+            .post(`${API_URL}login/`, {
+                email,
+                password,
+            })
+            .then((response) => {
+                if (response.data.access && response.data.refresh) {
+                    localStorage.setItem(
+                        'access',
+                        JSON.stringify(response.data.access)
+                    );
+                    localStorage.setItem(
+                        'refresh',
+                        JSON.stringify(response.data.refresh)
+                    );
+                    localStorage.setItem(
+                        'user',
+                        JSON.stringify(response.data.user)
+                    );
+                }
+
+                return response.data;
+            });
+    }
+
+    logout() {
+        localStorage.removeItem('access');
+        localStorage.removeItem('refresh');
+        localStorage.removeItem('user');
+    }
+
+    register(email, password1, password2) {
+        return axios.post(`${API_URL}register/`, {
+            email,
+            password1,
+            password2,
+        });
+    }
+
+    getAccessToken() {
+        const accessToken = localStorage.getItem('access');
+        if (accessToken) return JSON.parse(accessToken);
+
+        return null;
+    }
+
+    getRefreshToken() {
+        const refreshToken = localStorage.getItem('refresh');
+        if (refreshToken) return JSON.parse(refreshToken);
+
+        return null;
+    }
+
+    getCurrentUser() {
+        const userStr = localStorage.getItem('user');
+        if (userStr) return JSON.parse(userStr);
+
+        return null;
+    }
+}
+
+export default new AuthService();
diff --git a/frontendVue3/src/services/booleanExpressionParser.service.js b/frontendVue3/src/services/booleanExpressionParser.service.js
new file mode 100644
index 00000000..547029f4
--- /dev/null
+++ b/frontendVue3/src/services/booleanExpressionParser.service.js
@@ -0,0 +1,98 @@
+import {Negation} from "@/classes/Constraint/Negation";
+import {Implication} from "@/classes/Constraint/Implication";
+import {Conjunction} from "@/classes/Constraint/Conjunction";
+import {Disjunction} from "@/classes/Constraint/Disjunction";
+import {FeatureNodeConstraintItem} from "@/classes/Constraint/FeatureNodeConstraintItem";
+
+const operators = ['not', 'implies', 'and', 'or'];
+export const operatorPrecedence = {};
+operators.forEach((operator, i) => operatorPrecedence[operator] = i);
+
+export function parse(toParse, allNodes) {
+    const inputToken = toParse
+        .replaceAll('(', '( ')
+        .replaceAll(')', ' )')
+        .match(/(?:[^\s"]+|"[^"]*")+/g) // Split by space except double-quotes
+        .map(str => str.replaceAll("\"", ""))
+        .filter((str) => str); // Remove the undefined tokens
+
+    const operatorStack = [];
+    let outputStack = [];
+    inputToken.forEach((token) => {
+        if (operators.includes(token.toLowerCase())) {
+            parseOperator(token.toLowerCase(), operatorStack, outputStack);
+        } else if (token === '(') {
+            operatorStack.push('(');
+        } else if (token === ')') {
+            parseClosingBracket(operatorStack, outputStack);
+        } else {
+            outputStack.push(createFeatureNodeConstraintItem(token, allNodes));
+        }
+    });
+
+    // Push all operators to output that remains on operator-stack
+    while (operatorStack.length) {
+        convertToConstraintItem(operatorStack.pop(), outputStack);
+    }
+
+    if (outputStack.length > 1) {
+        throw Error(`Missing operator between ${outputStack[0].toString()} and ${outputStack[1].toString()}`);
+    } else {
+        return outputStack[0];
+    }
+}
+
+function parseOperator(token, operatorStack, outputStack) {
+    if (operatorStack.length) {
+        let lastOperator = operatorStack.at(-1);
+        while (lastOperator && lastOperator !== '(' && operatorPrecedence[token] > operatorPrecedence[lastOperator]) {
+            operatorStack.pop();
+            convertToConstraintItem(lastOperator, outputStack);
+            lastOperator = operatorStack.length ? operatorStack.at(-1) : undefined;
+        }
+    }
+    operatorStack.push(token);
+}
+
+function parseClosingBracket(operatorStack, outputStack) {
+    let lastOperator = operatorStack.pop();
+    while (lastOperator !== '(' && operatorStack.length !== 0) {
+        convertToConstraintItem(lastOperator, outputStack);
+        lastOperator = operatorStack.pop();
+    }
+}
+
+function convertToConstraintItem(operator, stack) {
+    operator = operator.toLowerCase();
+    let constraintItem;
+    if (operator === 'not') {
+        if (stack.length < 1) {
+            throw Error('Too few arguments: Expected 1 argument for not');
+        }
+        constraintItem = new Negation(stack.pop());
+    } else {
+        if (stack.length < 2) {
+            throw Error(`Too few arguments: Expected 2 arguments for ${operator}`);
+        }
+        const second = stack.pop();
+        const first = stack.pop();
+
+        if (operator === 'and') {
+            constraintItem = new Conjunction(first, second);
+        } else if (operator === 'or') {
+            constraintItem = new Disjunction(first, second);
+        } else if (operator === 'implies') {
+            constraintItem = new Implication(first, second);
+        }
+    }
+
+    stack.push(constraintItem);
+}
+
+function createFeatureNodeConstraintItem(featureNodeName, allNodes) {
+    const foundNode = allNodes.find((node) => node.name === featureNodeName);
+    if (!foundNode) {
+        throw Error(`FeatureNode '${featureNodeName} cannot be found`);
+    }
+    return new FeatureNodeConstraintItem(foundNode);
+}
\ No newline at end of file
diff --git a/frontendVue3/src/services/collaboration.service.js b/frontendVue3/src/services/collaboration.service.js
new file mode 100644
index 00000000..638cb71c
--- /dev/null
+++ b/frontendVue3/src/services/collaboration.service.js
@@ -0,0 +1,3 @@
+import { Peer } from "peerjs";
+
+export const instance = new Peer("pick-an-id");
diff --git a/frontendVue3/src/services/fileDeletion.service.js b/frontendVue3/src/services/fileDeletion.service.js
new file mode 100644
index 00000000..3d78d9f1
--- /dev/null
+++ b/frontendVue3/src/services/fileDeletion.service.js
@@ -0,0 +1,27 @@
+/*import api from './api.service';
+import { default as Modal } from '../components/Modal';
+
+const API_URL = process.env.VUE_APP_DOMAIN;
+
+export default function deleteFile(id: string) {
+  api.delete(`${API_URL}files/uploaded/unconfirmed/${id}/`)
+    .then(() => {
+      Modal.fire({
+        icon: 'success',
+        title: 'Success!!',
+        text: 'File was deleted successfully',
+      }).then(() => {
+        window.location.replace('/');
+      });
+    })
+    .catch((error) => {
+      Modal.fire({
+        icon: 'error',
+        title: 'Error!!',
+        text: JSON.stringify(error.message),
+      }).then(() => {
+        window.location.replace('/');
+      });
+    });
+}
+*/
\ No newline at end of file
diff --git a/frontendVue3/src/services/numbers.service.js b/frontendVue3/src/services/numbers.service.js
new file mode 100644
index 00000000..190c5f1f
--- /dev/null
+++ b/frontendVue3/src/services/numbers.service.js
@@ -0,0 +1,3 @@
+export function isNumeric(value) {
+    return /^-?\d+$/.test(value);
+}
diff --git a/frontendVue3/src/services/xmlTranspiler.service.js b/frontendVue3/src/services/xmlTranspiler.service.js
new file mode 100644
index 00000000..5d9c57ff
--- /dev/null
+++ b/frontendVue3/src/services/xmlTranspiler.service.js
@@ -0,0 +1,212 @@
+import { FeatureNode } from '@/classes/FeatureNode';
+import { Constraint } from '@/classes/Constraint';
+import { FeatureNodeConstraintItem } from '@/classes/Constraint/FeatureNodeConstraintItem';
+import { Disjunction } from '@/classes/Constraint/Disjunction';
+import { Conjunction } from '@/classes/Constraint/Conjunction';
+import { Implication } from '@/classes/Constraint/Implication';
+import { Negation } from '@/classes/Constraint/Negation';
+
+export function xmlToJson(currentModel, data) {
+    /*const start = performance.now();*/
+
+    // To remove the <?xml...?> line
+    let m = currentModel.split('\n').splice(1).join('\n');
+
+    const parser = new DOMParser();
+    const xmlDocument = parser.parseFromString(m, 'text/xml');
+
+    const struct = xmlDocument.querySelector('struct');
+    const constraintsContainer = xmlDocument.querySelector('constraints');
+    const propertiesSection = xmlDocument.querySelector('properties');
+    const calculationsSection = xmlDocument.querySelector('calculations');
+    const commentsSection = xmlDocument.querySelector('comments');
+    const featureOrderSection = xmlDocument.querySelector('featureOrder');
+
+    data.calculations = getCalculations(calculationsSection);
+
+    data.rootNode = getChildrenOfFeature(struct, null, data)[0];
+    data.constraints = readConstraints(
+        [...constraintsContainer.childNodes],
+        data
+    );
+    data.properties = getProperties(propertiesSection);
+    data.comments = getComments(commentsSection);
+    data.featureOrder = getFeatureOrder(featureOrderSection);
+
+    /*console.log('Parsertime', performance.now() - start);*/
+}
+
+function getChildrenOfFeature(struct, parent, data) {
+    let toReturn = [];
+
+    for (const child of struct.childNodes) {
+        // To remove #text nodes, as they don't have a tagName
+        if (child.tagName) {
+            let toAppend = new FeatureNode(
+                parent,
+                child.getAttribute('name'),
+                child.tagName,
+                child.getAttribute('mandatory') === 'true',
+                child.getAttribute('abstract') === 'true'
+            );
+            toAppend.children = getChildrenOfFeature(child, toAppend, data);
+
+            data.featureMap[toAppend.name] = toAppend;
+            toReturn.push(toAppend);
+        }
+    }
+
+    return toReturn;
+}
+
+function readConstraints(constraints, data) {
+    return constraints
+        .filter((rule) => rule.tagName)
+        .map((rule) => {
+            return [...rule.childNodes]
+                .filter((item) => item.tagName)
+                .map(
+                    (item) => new Constraint(readConstraintItem(item, data))
+                )[0];
+        });
+}
+
+function readConstraintItem(item, data) {
+    if (item.tagName === 'var') {
+        return new FeatureNodeConstraintItem(
+            data.featureMap[item.innerHTML.trim()]
+        );
+    } else {
+        const childItems = [...item.childNodes]
+            .filter((childItem) => childItem.tagName)
+            .map((childItem) => readConstraintItem(childItem, data));
+
+        switch (item.tagName) {
+            case 'disj':
+                return new Disjunction(childItems[0], childItems[1]);
+            case 'conj':
+                return new Conjunction(childItems[0], childItems[1]);
+            case 'imp':
+                return new Implication(childItems[0], childItems[1]);
+            case 'not':
+                return new Negation(childItems[0]);
+        }
+    }
+}
+
+function getProperties(properties) {
+    if (!properties) return [];
+
+    return [...properties.childNodes]
+        .filter((element) => element.tagName)
+        .map((element) => ({
+            tag: element.tagName,
+            key: element.getAttribute('key'),
+            value: element.getAttribute('value'),
+        }));
+}
+
+function getCalculations(calculationsSection) {
+    if (!calculationsSection) return null;
+
+    return {
+        Auto: calculationsSection.getAttribute('Auto'),
+        Constraints: calculationsSection.getAttribute('Constraints'),
+        Features: calculationsSection.getAttribute('Features'),
+        Redundant: calculationsSection.getAttribute('Redundant'),
+        Tautology: calculationsSection.getAttribute('Tautology'),
+    };
+}
+
+function getComments(commentsSection) {
+    if (!commentsSection) return [];
+
+    return [...commentsSection.childNodes]
+        .filter((element) => element.tagName)
+        .map((element) => element.innerHTML);
+}
+
+function getFeatureOrder(featureOrder) {
+    if (!featureOrder) return null;
+
+    return {
+        userDefined: featureOrder.getAttribute('userDefined'),
+    };
+}
+
+export function jsonToXML(data) {
+    let xml = `<?xml version="1.0" encoding="UTF-8" standalone="no"?><featureModel>`;
+
+    xml += `<properties>${data.properties.reduce(
+        (prev, prop) =>
+            prev + `<${prop.tag} key="${prop.key}" value="${prop.value}"/>`,
+        ''
+    )}</properties>`;
+
+    xml += `<struct>${nodeToXML(data.rootNode)}</struct>`;
+
+    xml += `<constraints>${data.constraints.reduce(
+        (prev, constraint) => `${prev}<rule>${constraint.toStringXML()}</rule>`,
+        ''
+    )}</constraints>`;
+
+    if (data.calculations) {
+        xml += `<calculations
+                    Auto="${data.calculations.Auto}"
+                    Constraints="${data.calculations.Constraints}"
+                    Redundant="${data.calculations.Redundant}"
+                    Tautology="${data.calculations.Tautology}"
+                    Features="${data.calculations.Features}"
+                    />`;
+    }
+
+    xml += `<comments>${data.comments
+        .map((comment) => '<c>' + comment + '</c>')
+        .join(' ')}</comments>`;
+
+    if (data.featureOrder) {
+        xml += `<featureOrder
+                    userDefined="${data.featureOrder.userDefined}"
+                    />`;
+    }
+
+    xml += `</featureModel>`;
+
+    return xml;
+}
+
+export function downloadXML(data) {
+    const xml = jsonToXML(data);
+
+    const filename = 'featureModel.xml';
+    const pom = document.createElement('a');
+    const bb = new Blob([xml], { type: 'application/xml' });
+
+    pom.setAttribute('href', window.URL.createObjectURL(bb));
+    pom.setAttribute('download', filename);
+
+    pom.dataset.downloadurl = ['application/xml', pom.download, pom.href].join(
+        ':'
+    );
+
+    pom.click();
+}
+
+function nodeToXML(node) {
+    if (node.isLeaf()) {
+        return `<feature ${node.isAbstract ? 'abstract="true" ' : ''}${
+            node.isMandatory ? 'mandatory="true" ' : ''
+        }name="${node.name}"/>`;
+    } else {
+        let toReturn = `<${node.groupType} ${
+            node.isAbstract ? 'abstract="true" ' : ''
+        }${node.isMandatory ? 'mandatory="true" ' : ''}name="${node.name}">`;
+
+        node.children.forEach((childNode) => {
+            toReturn += nodeToXML(childNode);
+        });
+
+        toReturn += `</${node.groupType}>`;
+        return toReturn;
+    }
+}
diff --git a/frontendVue3/src/store/app.js b/frontendVue3/src/store/app.js
new file mode 100644
index 00000000..69d58ce9
--- /dev/null
+++ b/frontendVue3/src/store/app.js
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia';
+
+export const useAppStore = defineStore('app', {
+    state: () => ({
+        snackbar: {
+            show: false,
+            variant: 'success',
+            timeout: 5000,
+            message: '',
+        },
+        fileCreateAlert: {
+            show: false,
+            variant: 'success',
+            message: '',
+        },
+        isOnline: true,
+    }),
+    actions: {
+        updateSnackbar(message, variant, timeout, show) {
+            this.snackbar.message = message;
+            this.snackbar.variant = variant;
+            this.snackbar.timeout = timeout;
+            this.snackbar.show = show;
+        },
+        closeSnackbar() {
+            this.snackbar.show = false;
+        },
+        updateFileCreateAlert(message, variant, show) {
+            this.fileCreateAlert.message = message;
+            this.fileCreateAlert.variant = variant;
+            this.fileCreateAlert.show = show;
+        },
+        closeFileCreateAlert() {
+            this.fileCreateAlert.show = false;
+        },
+        setOnlineState(isOnline) {
+            this.isOnline = isOnline;
+        },
+    },
+});
diff --git a/frontendVue3/src/store/auth.js b/frontendVue3/src/store/auth.js
new file mode 100644
index 00000000..c720044d
--- /dev/null
+++ b/frontendVue3/src/store/auth.js
@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia';
+import authService from '@/services/auth.service';
+import api from '@/services/api.service';
+import { useAppStore } from '@/store/app';
+
+const API_URL = import.meta.env.VITE_APP_DOMAIN;
+
+export const useAuthStore = defineStore('auth', {
+    state: () => ({
+        loggedIn: !!authService.getCurrentUser(),
+        currentUser: authService.getCurrentUser(),
+        accessToken: authService.getAccessToken(),
+    }),
+    actions: {
+        logout() {
+            const appStore = useAppStore();
+
+            authService.logout();
+            this.loggedIn = !!authService.getCurrentUser();
+            this.currentUser = authService.getCurrentUser();
+            this.accessToken = authService.getAccessToken();
+            appStore.updateSnackbar(
+                'Successfully logged out',
+                'success',
+                5000,
+                true
+            );
+        },
+        login() {
+            const appStore = useAppStore();
+
+            this.loggedIn = !!authService.getCurrentUser();
+            this.currentUser = authService.getCurrentUser();
+            this.accessToken = authService.getAccessToken();
+            appStore.updateSnackbar('Login Successful!', 'success', 5000, true);
+        },
+        async loginWithGithubRedirect() {
+            const appStore = useAppStore();
+            return api
+                .post(`${API_URL}auth/github/redirect/`)
+                .then((response) => {
+                    return response.data.url;
+                })
+                .catch((error) => {
+                    appStore.updateSnackbar(
+                        'Error while connecting to GitHub: ' + error.message,
+                        'error',
+                        5000,
+                        true
+                    );
+                    return error;
+                });
+        },
+    },
+});
diff --git a/frontendVue3/src/store/file.js b/frontendVue3/src/store/file.js
new file mode 100644
index 00000000..e2de74aa
--- /dev/null
+++ b/frontendVue3/src/store/file.js
@@ -0,0 +1,143 @@
+import { defineStore } from 'pinia';
+import authService from '@/services/auth.service';
+import api from '@/services/api.service';
+import { useAppStore } from '@/store/app';
+import { useAuthStore } from '@/store/auth';
+
+const API_URL = import.meta.env.VITE_APP_DOMAIN;
+
+export const useFileStore = defineStore('file', {
+    state: () => ({
+        tags: [],
+        families: [],
+        analysis: [],
+        licenses: [],
+        confirmedFeatureModels: [],
+        myConfirmedFeatureModels: [],
+        featureModels: [],
+    }),
+    getters: {
+        myOwnTags(state) {
+            return state.tags.filter((el) => el.owner);
+        },
+        myOwnFamilies(state) {
+            return state.families.filter((el) => el.owner);
+        },
+    },
+    actions: {
+        fetchConfirmedFeatureModels() {
+            api.get(`${API_URL}files/uploaded/confirmed/`).then((response) => {
+                this.confirmedFeatureModels = response.data;
+                console.log(response.data[0]);
+            });
+        },
+        async fetchMyConfirmedFeatureModels() {
+            const id = useAuthStore().currentUser.id;
+            api.get(`${API_URL}files/uploaded/confirmed/?owner=` + id).then(
+                (response) => {
+                    this.myConfirmedFeatureModels = response.data;
+                }
+            );
+        },
+        async fetchFeatureModelOfFamily(value) {
+            await api
+                .get(`${API_URL}files/uploaded/confirmed/?family=${value}`)
+                .then((response) => {
+                    if (response.data.length === 0) {
+                        return null;
+                    } else {
+                        return response.data;
+                        /*this.numberOfModelsInFamily = response.data.length;
+                        this.allVersions = response.data.map(
+                            (item) => item.version
+                        );
+                        this.latestFeatureModelVersion =
+                            response.data[response.data.length - 1].version;*/
+                    }
+                });
+        },
+        fetchLicenses() {
+            api.get(`${API_URL}licenses/`).then((response) => {
+                this.licenses = response.data;
+            });
+        },
+        fetchTags() {
+            api.get(`${API_URL}tags/`).then((response) => {
+                this.tags = response.data;
+            });
+        },
+        fetchFamilies() {
+            api.get(`${API_URL}families/`).then((response) => {
+                this.families = response.data;
+            });
+        },
+        async uploadBulkFeatureModels(data) {
+            const appStore = useAppStore();
+            await api
+                .post(`${API_URL}bulk-upload/`, data, {
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                })
+                .then(() => {
+                    appStore.updateSnackbar(
+                        'Upload successfully! Check your mails',
+                        'success',
+                        5000,
+                        true
+                    );
+                })
+                .catch((error) => {
+                    appStore.updateSnackbar(
+                        'Error! ' + error.message,
+                        'error',
+                        5000,
+                        true
+                    );
+                });
+        },
+        async uploadTag(payload) {
+            // payload = { label, description, is_public }
+            const appStore = useAppStore();
+            return api
+                .post(`${API_URL}tags/`, payload)
+                .then((response) => {
+                    appStore.updateFileCreateAlert(
+                        `Successfully uploaded new tag '${payload.label}'`,
+                        'success',
+                        true
+                    );
+                    return response.data;
+                })
+                .catch((error) => {
+                    appStore.updateFileCreateAlert(
+                        'Error while uploading new tag: ' + error.message,
+                        'error',
+                        true
+                    );
+                    return error;
+                });
+        },
+        async uploadFamily(payload) {
+            // payload = { label, description }
+            const appStore = useAppStore();
+            return api
+                .post(`${API_URL}families/`, payload)
+                .then((response) => {
+                    appStore.updateFileCreateAlert(
+                        `Successfully uploaded new family '${payload.label}'`,
+                        'success',
+                        true
+                    );
+                    return response.data;
+                })
+                .catch((error) => {
+                    console.log(error);
+                    appStore.updateFileCreateAlert(
+                        'Error while uploading new family: ' + error.message,
+                        'error',
+                        true
+                    );
+                    return error;
+                });
+        },
+    },
+});
diff --git a/frontendVue3/src/store/index.js b/frontendVue3/src/store/index.js
new file mode 100644
index 00000000..15362525
--- /dev/null
+++ b/frontendVue3/src/store/index.js
@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()
diff --git a/frontendVue3/src/styles/settings.scss b/frontendVue3/src/styles/settings.scss
new file mode 100644
index 00000000..4e0191f5
--- /dev/null
+++ b/frontendVue3/src/styles/settings.scss
@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://next.vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify' with (
+//   $color-pack: false
+// );
diff --git a/frontendVue3/src/views/DSGVO.vue b/frontendVue3/src/views/DSGVO.vue
new file mode 100644
index 00000000..75148e0d
--- /dev/null
+++ b/frontendVue3/src/views/DSGVO.vue
@@ -0,0 +1,220 @@
+<template>
+    <div class="mainView">
+        <h3 class="text-h3 mb-2 mt-8" style="hyphens: manual">
+            Datenschutz&shy;erklärung
+        </h3>
+        <h5 class="text-h5 mb-4">Grundlegendes</h5>
+        <p>
+            Diese Datenschutzerklärung soll die Nutzer dieser Website über die
+            Art, den Umfang und den Zweck der Erhebung und Verwendung
+            personenbezogener Daten durch den Websitebetreiber Tobias Heß
+            informieren.
+        </p>
+        <p>
+            Der Websitebetreiber nimmt Ihren Datenschutz sehr ernst und
+            behandelt Ihre personenbezogenen Daten vertraulich und entsprechend
+            der gesetzlichen Vorschriften. Da durch neue Technologien und die
+            ständige Weiterentwicklung dieser Webseite Änderungen an dieser
+            Datenschutzerklärung vorgenommen werden können, empfehlen wir Ihnen
+            sich die Datenschutzerklärung in regelmäßigen Abständen wieder
+            durchzulesen.
+        </p>
+        <p>
+            Definitionen der verwendeten Begriffe (z.B. “personenbezogene Daten”
+            oder “Verarbeitung”) finden Sie in Art. 4 DSGVO.
+        </p>
+
+        <h5 class="text-h5 mb-4">Zugriffsdaten</h5>
+        <p>
+            Wir, der Websitebetreiber bzw. Seitenprovider, erheben aufgrund
+            unseres berechtigten Interesses (s. Art. 6 Abs. 1 lit. f. DSGVO)
+            Daten über Zugriffe auf die Website und speichern diese als
+            „Server-Logfiles“ auf dem Server der Website ab. Folgende Daten
+            werden so protokolliert:
+        </p>
+        <div>
+            <ul>
+                <li>Besuchte Website</li>
+                <li>Uhrzeit zum Zeitpunkt des Zugriffes</li>
+                <li>Menge der gesendeten Daten in Byte</li>
+                <li>Quelle/Verweis, von welchem Sie auf die Seite gelangten</li>
+                <li>Verwendeter Browser</li>
+                <li>Verwendetes Betriebssystem</li>
+                <li>Verwendete IP-Adresse</li>
+            </ul>
+        </div>
+        <p>
+            Die Server-Logfiles werden für maximal 7 Tage gespeichert und
+            anschließend gelöscht. Die Speicherung der Daten erfolgt aus
+            Sicherheitsgründen, um z. B. Missbrauchsfälle aufklären zu können.
+            Müssen Daten aus Beweisgründen aufgehoben werden, sind sie solange
+            von der Löschung ausgenommen bis der Vorfall endgültig geklärt ist.
+        </p>
+
+        <h5 class="text-h5 mb-4">Cookies</h5>
+        <p>
+            Bei Cookies handelt es sich um kleine Dateien, welche auf Ihrem
+            Endgerät gespeichert werden. Ihr Browser greift auf diese Dateien
+            zu. Durch den Einsatz von Cookies erhöht sich die
+            Benutzerfreundlichkeit und Sicherheit dieser Website. Diese Website
+            verwendet ausschließlich technische Cookies die das
+            Webseitenerlebnis angenehmer machen. Personenbezogene Cookies werden
+            nicht gesammelt!
+        </p>
+        <p>
+            Gängige Browser bieten die Einstellungsoption, Cookies nicht
+            zuzulassen. Hinweis: Es ist nicht gewährleistet, dass Sie auf alle
+            Funktionen dieser Website ohne Einschränkungen zugreifen können,
+            wenn Sie entsprechende Einstellungen vornehmen.
+        </p>
+        <p>Diese Webseite verwendet folgende cookies:</p>
+        <v-table>
+            <thead>
+                <tr>
+                    <th class="text-left" scope="col">Name</th>
+                    <th class="text-left" scope="col">Zweck</th>
+                    <th class="text-left" scope="col">Vorhaltedauer</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in cookies" :key="item.name">
+                    <td>{{ item.name }}</td>
+                    <td>{{ item.purpose }}</td>
+                    <td>{{ item.retentionPeriod }}</td>
+                </tr>
+            </tbody>
+        </v-table>
+
+        <h5 class="text-h5 mb-4">
+            Erfassung und Verarbeitung personenbezogener Daten
+        </h5>
+        <p>
+            Der Websitebetreiber erhebt, nutzt und gibt Ihre personenbezogenen
+            Daten nur dann weiter, wenn dies im gesetzlichen Rahmen erlaubt ist
+            oder Sie in die Datenerhebung einwilligen. Als personenbezogene
+            Daten gelten sämtliche Informationen, welche dazu dienen, Ihre
+            Person zu bestimmen und welche zu Ihnen zurückverfolgt werden können
+            – also beispielsweise Ihr Name, Ihre E-Mail-Adresse und
+            Telefonnummer.
+        </p>
+        <p>
+            Diese Website können Sie auch besuchen, ohne Angaben zu Ihrer Person
+            zu machen. Zum Schutz unserer technischen Infrastruktur speichern
+            wir jedoch (ohne Personenbezug) Ihre Zugriffsdaten auf diese
+            Website. Zu diesen Zugriffsdaten gehören z. B. die von Ihnen
+            angeforderte Datei oder der Name Ihres Internet-Providers. Durch die
+            Anonymisierung der Daten sind Rückschlüsse auf Ihre Person nicht
+            möglich. Wir sammeln personenbezogene Daten nur im Falle einer
+            Registrierung auf unserer Website.
+        </p>
+        <p>
+            Im Falle einer Registrierung sammeln wir folgende personendbezogene
+            Daten:
+        </p>
+        <v-table>
+            <thead>
+                <tr>
+                    <th class="text-left" scope="col">Art der Daten</th>
+                    <th class="text-left" scope="col">Art der Sammlung</th>
+                    <th class="text-left" scope="col">Zweck</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in personalData" :key="item.name">
+                    <td>{{ item.typeOfData }}</td>
+                    <td>{{ item.typeOfCollection }}</td>
+                    <td>{{ item.purpose }}</td>
+                </tr>
+            </tbody>
+        </v-table>
+
+        <h5 class="text-h5 mb-4">Umgang mit Kontaktdaten</h5>
+        <p>
+            Nehmen Sie mit uns als Websitebetreiber durch die angebotenen
+            Kontaktmöglichkeiten Verbindung auf, werden Ihre Angaben
+            gespeichert, damit auf diese zur Bearbeitung und Beantwortung Ihrer
+            Anfrage zurückgegriffen werden kann. Ohne Ihre Einwilligung werden
+            diese Daten nicht an Dritte weitergegeben.
+        </p>
+
+        <h5 class="text-h5 mb-4">Rechte des Nutzers</h5>
+        <p>
+            Sie haben als Nutzer das Recht, auf Antrag eine kostenlose Auskunft
+            darüber zu erhalten, welche personenbezogenen Daten über Sie
+            gespeichert wurden. Sie haben außerdem das Recht auf Berichtigung
+            falscher Daten und auf die Verarbeitungseinschränkung oder Löschung
+            Ihrer personenbezogenen Daten. Falls zutreffend, können Sie auch Ihr
+            Recht auf Datenportabilität geltend machen. Sollten Sie annehmen,
+            dass Ihre Daten unrechtmäßig verarbeitet wurden, können Sie eine
+            Beschwerde bei der zuständigen Aufsichtsbehörde einreichen
+        </p>
+
+        <h5 class="text-h5 mb-4">Löschung von Daten</h5>
+        <p>
+            Sofern Ihr Wunsch nicht mit einer gesetzlichen Pflicht zur
+            Aufbewahrung von Daten (z. B. Vorratsdatenspeicherung) kollidiert,
+            haben Sie ein Anrecht auf Löschung Ihrer Daten. Von uns gespeicherte
+            Daten werden, sollten sie für ihre Zweckbestimmung nicht mehr
+            vonnöten sein und es keine gesetzlichen Aufbewahrungsfristen geben,
+            gelöscht. Falls eine Löschung nicht durchgeführt werden kann, da die
+            Daten für zulässige gesetzliche Zwecke erforderlich sind, erfolgt
+            eine Einschränkung der Datenverarbeitung. In diesem Fall werden die
+            Daten gesperrt und nicht für andere Zwecke verarbeitet.
+        </p>
+
+        <h5 class="text-h5 mb-4">Widerspruchsrecht</h5>
+        <p>
+            Nutzer dieser Webseite können von ihrem Widerspruchsrecht Gebrauch
+            machen und der Verarbeitung ihrer personenbezogenen Daten zu jeder
+            Zeit widersprechen. Wenn Sie eine Berichtigung, Sperrung, Löschung
+            oder Auskunft über die zu Ihrer Person gespeicherten
+            personenbezogenen Daten wünschen oder Fragen bzgl. der Erhebung,
+            Verarbeitung oder Verwendung Ihrer personenbezogenen Daten haben
+            oder erteilte Einwilligungen widerrufen möchten, wenden Sie sich
+            bitte an folgende E-Mail-Adresse: [EMail-Adresse einfügen]
+        </p>
+    </div>
+</template>
+
+<script setup>
+const cookies = [
+    {
+        name: 'sessionid',
+        purpose:
+            'Verbessert die Nutzererfahrung, sodass der Nutzer sich bei erneutem Besuch der Website nicht neu anmelden muss.',
+        retentionPeriod: '14 Tage',
+    },
+    {
+        name: 'csrftoken',
+        purpose:
+            'Schützt den Nutzer vor Cross-site request forgery (CSRF) Angriffen.',
+        retentionPeriod: '1 Jahr',
+    },
+];
+const personalData = [
+    {
+        typeOfData: 'E-Mail-Adresse',
+        typeOfCollection:
+            'Muss beim Registrieren auf der Website angegeben werden.',
+        purpose:
+            'Zusendung der Authentifizierungs-Mail, zusendung weiterer Bestätigungs-Mails beim Hochladen von Dateien.',
+    },
+    {
+        typeOfData: 'Datum der Registrierung',
+        typeOfCollection: 'Wird beim Registrieren auf der Website erfasst.',
+        purpose: 'Rückverfolgung bei Missbrauch.',
+    },
+    {
+        typeOfData: 'Institut',
+        typeOfCollection:
+            'Wenn der Nutzer Mitglied eines Universitäts-Instituts ist, kann er dies freiwillig angeben.',
+        purpose: 'Präsentation der eigenen Person.',
+    },
+    {
+        typeOfData: 'Mitarbeiter-Flag',
+        typeOfCollection:
+            'Wenn der Nutzer Mitarbeiter der Website ist, wird dies angezeigt.',
+        purpose: 'Kennzeichnung von Administratoren.',
+    },
+];
+</script>
diff --git a/frontendVue3/src/views/Histories.vue b/frontendVue3/src/views/Histories.vue
new file mode 100644
index 00000000..fef3a362
--- /dev/null
+++ b/frontendVue3/src/views/Histories.vue
@@ -0,0 +1,241 @@
+<template>
+    <div class="mainView">
+        <h3 class="text-h3 mb-2 mt-8">My Families</h3>
+        <h5 class="text-h5 mb-4">Here you can add new families</h5>
+        <v-data-table
+            :headers="headers"
+            :items="fileStore.families"
+            :loading="loading"
+            :search="search"
+            class="elevation-1"
+            @click:row="handleClick"
+        >
+            <template v-slot:top>
+                <v-toolbar flat>
+                    <v-toolbar-title class="hidden-sm-and-down"
+                        >Families</v-toolbar-title
+                    >
+                    <v-divider
+                        class="mx-4 hidden-sm-and-down"
+                        inset
+                        vertical
+                    ></v-divider>
+                    <v-spacer class="hidden-sm-and-down"></v-spacer>
+                    <v-text-field
+                        v-model="search"
+                        append-icon="mdi-magnify"
+                        hide-details
+                        label="Search"
+                        single-line
+                    ></v-text-field>
+                    <v-dialog v-model="dialog" max-width="500px">
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-btn
+                                class="mb-2 ml-4"
+                                color="primary"
+                                dark
+                                rounded
+                                v-bind="attrs"
+                                v-on="on"
+                            >
+                                <v-icon left> mdi-plus</v-icon>
+                                New Family
+                            </v-btn>
+                        </template>
+                        <v-card>
+                            <v-card-title>
+                                <span class="text-h5">{{ formTitle }}</span>
+                            </v-card-title>
+
+                            <v-card-text>
+                                <v-container>
+                                    <v-row>
+                                        <v-col cols="12">
+                                            <v-text-field
+                                                v-model="editedItem.label"
+                                                label="Label"
+                                            ></v-text-field>
+                                        </v-col>
+                                        <v-col cols="12">
+                                            <v-text-field
+                                                v-model="editedItem.description"
+                                                label="Description"
+                                            ></v-text-field>
+                                        </v-col>
+                                    </v-row>
+                                </v-container>
+                            </v-card-text>
+
+                            <v-card-actions>
+                                <v-spacer></v-spacer>
+                                <v-btn
+                                    color="blue darken-1"
+                                    text
+                                    @click="close"
+                                >
+                                    Cancel
+                                </v-btn>
+                                <v-btn
+                                    :loading="addLoading"
+                                    color="blue darken-1"
+                                    text
+                                    @click="save"
+                                >
+                                    Save
+                                </v-btn>
+                            </v-card-actions>
+                        </v-card>
+                    </v-dialog>
+                </v-toolbar>
+            </template>
+            <template v-slot:item.actions="{ item }">
+                <v-btn
+                    :disabled="item.owner === false"
+                    class="mr-2"
+                    color="primary"
+                    rounded
+                    small
+                    @click="editItem(item)"
+                >
+                    <v-icon>mdi-pencil</v-icon>
+                </v-btn>
+                <!-- <v-btn small rounded color="error" class="mr-2"> <v-icon>mdi-delete</v-icon></v-btn> -->
+            </template>
+            <template v-slot:item.id="{ index }">
+                {{ index + 1 }}
+            </template>
+            <template v-slot:item.owner="{ item }">
+                <v-icon v-if="item.owner" color="success"> mdi-check</v-icon>
+                <v-icon v-else color="error"> mdi-cancel</v-icon>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import api from '@/services/api.service';
+import { useFileStore } from '@/store/file';
+
+const fileStore = useFileStore();
+const API_URL = process.env.VUE_APP_DOMAIN;
+
+const search = '';
+const dialog = false;
+const editedIndex = -1;
+const headers = [
+    {
+        text: 'ID',
+        align: 'start',
+        sortable: false,
+        value: 'id',
+    },
+    { text: 'Label', value: 'label' },
+    { text: 'Description', value: 'description' },
+    { text: 'Owner', value: 'owner' },
+    {
+        text: 'Actions',
+        align: 'center',
+        value: 'actions',
+        sortable: false,
+    },
+];
+const editedItem = {
+    label: '',
+    description: '',
+    owner: false,
+};
+const defaultItem = {
+    label: '',
+    description: '',
+    owner: false,
+};
+const families = [];
+const loading = ref(false);
+const addLoading = ref(false);
+
+const formTitle = computed(() => {
+    return this.editedIndex === -1 ? 'Create New Family' : 'Edit Family';
+});
+
+function editItem(item) {
+    this.editedIndex = item.id;
+    this.editedItem = Object.assign({}, item);
+    this.dialog = true;
+}
+function close() {
+    this.dialog = false;
+    this.$nextTick(() => {
+        this.editedIndex = -1;
+    });
+}
+
+function addFamily() {
+    this.addLoading = true;
+    api.post(`${API_URL}families/`, this.editedItem)
+        .then(() => {
+            this.$store.commit('updateSnackbar', {
+                message: 'Family added successfully!',
+                variant: 'success',
+                timeout: 5000,
+                show: true,
+            });
+            this.$store.dispatch('fetchFamilies');
+            this.addLoading = false;
+        })
+        .catch((error) => {
+            this.$store.commit('updateSnackbar', {
+                message: 'Error: ' + error.message,
+                variant: 'error',
+                timeout: 5000,
+                show: true,
+            });
+            this.addLoading = false;
+        });
+}
+
+function updateFamily() {
+    this.addLoading = true;
+    api.put(`${API_URL}families/${this.editedIndex}/`, this.editedItem)
+        .then(() => {
+            this.$store.commit('updateSnackbar', {
+                message: 'Family updated successfully!',
+                variant: 'success',
+                timeout: 5000,
+                show: true,
+            });
+            this.$store.dispatch('fetchFamilies');
+            this.addLoading = false;
+        })
+        .catch((error) => {
+            this.$store.commit('updateSnackbar', {
+                message: 'Error: ' + error.message,
+                variant: 'error',
+                timeout: 5000,
+                show: true,
+            });
+            this.addLoading = false;
+        });
+}
+
+function save() {
+    if (this.editedIndex > -1) {
+        this.updateFamily();
+    } else {
+        this.addFamily();
+    }
+    this.close();
+}
+function handleClick(value) {
+    this.$router.push({
+        name: 'FamilyDetail',
+        params: { id: value.id, slug: value.slug },
+    });
+}
+onMounted(() => {
+    loading.value = true;
+    fileStore.fetchConfirmedFeatureModels();
+    families.value = fileStore.families;
+    loading.value = false;
+});
+</script>
diff --git a/frontendVue3/src/views/Home.vue b/frontendVue3/src/views/Home.vue
new file mode 100644
index 00000000..96c60455
--- /dev/null
+++ b/frontendVue3/src/views/Home.vue
@@ -0,0 +1,131 @@
+<template>
+    <div class="mainView">
+        <h3 class="text-h3 mb-2 mt-8">Welcome to variability.dev</h3>
+        <h5 class="text-h5 mb-4">
+            A web service for sharing feature model instances and collaborative
+            benchmarking
+        </h5>
+        <feature-model-table
+            id="feature-model-table"
+            :items="confirmedFeatureModels"
+            :loading="loading"
+            :addable="true"
+        />
+        <!--    <tutorial-mode
+      :show="showTutorial"
+      @close="showTutorial = false"
+      :next-steps="tutorialSteps"
+      local-storage-identifier="homeTutorialCompleted"
+    ></tutorial-mode>-->
+        <!--        <v-btn
+            id="tutorial-mode"
+            fab
+            fixed
+            right
+            bottom
+            color="primary"
+            @click="showTutorial = true"
+        >
+            <v-icon> mdi-school </v-icon>
+        </v-btn>-->
+    </div>
+</template>
+
+<script setup>
+import FeatureModelTable from '@/components/FeatureModelTable.vue';
+import { onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useFileStore } from '@/store/file';
+
+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 = true;
+const info = '';
+const showTutorial = false;
+const tutorialSteps = [
+    {
+        title: 'Welcome to the tutorial!',
+        description:
+            'You can restart the tutorial anytime by clicking on this button.',
+        elementCssSelector: '#tutorial-mode',
+    },
+    {
+        title: 'All public feature models',
+        description:
+            'In this table you can see all public feature models. You can view them, or - if you are the owner - check analyses or delete them.',
+        elementCssSelector: '#feature-model-table',
+    },
+    {
+        title: 'Search feature models',
+        description:
+            'If there are already any feature models uploaded, you can search them here.',
+        elementCssSelector: '#feature-model-search',
+    },
+    {
+        title: 'Upload feature model',
+        description:
+            'With this button, you are able to upload a feature model to variability.dev. A wizard will pop up that allows you to either upload a single feature model, or bulk upload many feature models or upload even as a zip.',
+        elementCssSelector: '#feature-model-upload',
+    },
+    {
+        title: 'Create new feature model',
+        description:
+            'You can create a new feature model from scratch with this button.',
+        elementCssSelector: '#feature-model-create',
+    },
+    {
+        title: 'Load FM from local storage',
+        description:
+            '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();
+});
+</script>
diff --git a/frontendVue3/src/views/Login.vue b/frontendVue3/src/views/Login.vue
new file mode 100644
index 00000000..dcaf41be
--- /dev/null
+++ b/frontendVue3/src/views/Login.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="mainView">
+        <div
+            style="
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                align-items: center;
+            "
+        >
+            <h4 class="text-h4 mb-2 mt-8">Login to variability.dev</h4>
+            <login-div style="max-width: 500px"></login-div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import LoginDiv from '@/components/LoginDiv.vue';
+</script>
diff --git a/frontendVue3/src/views/Models.vue b/frontendVue3/src/views/Models.vue
new file mode 100644
index 00000000..b8224fa5
--- /dev/null
+++ b/frontendVue3/src/views/Models.vue
@@ -0,0 +1,151 @@
+<template>
+    <div class="mainView">
+        <h3 class="text-h3 mb-2 mt-8">My Feature Models</h3>
+        <h5 class="text-h5 mb-4">Here you can add new Feature Models</h5>
+        <feature-model-table
+            v-if="appStore.isOnline"
+            :items="confirmedFeatureModels"
+            :loading="loading"
+            :addable="true"
+        />
+        <template>
+            <v-container v-if="!appStore.isOnline">
+                <div
+                    class="d-flex justify-space-around align-center"
+                    :class="breakpoints.smAndDown ? 'flex-column' : ''"
+                >
+                    <v-btn
+                        class="mb-2 ml-4"
+                        color="success"
+                        rounded
+                        link
+                        to="/feature-model/new"
+                    >
+                        <v-icon left> mdi-plus</v-icon>
+                        Create new model
+                    </v-btn>
+                    <v-btn
+                        :disabled="!checkLocalStorage"
+                        class="mb-2 ml-4"
+                        color="secondary"
+                        rounded
+                        link
+                        to="/feature-model/local"
+                    >
+                        <v-icon left> mdi-server</v-icon>
+                        Edit Model from local storage
+                    </v-btn>
+                </div>
+            </v-container>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import FeatureModelTable from '@/components/FeatureModelTable.vue';
+import { onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useFileStore } from '@/store/file';
+import { useAppStore } from '@/store/app';
+import { useDisplay } from 'vuetify';
+
+const breakpoints = useDisplay();
+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 = true;
+const info = '';
+const showTutorial = false;
+const tutorialSteps = [
+    {
+        title: 'Welcome to the tutorial!',
+        description:
+            'You can restart the tutorial anytime by clicking on this button.',
+        elementCssSelector: '#tutorial-mode',
+    },
+    {
+        title: 'All public feature models',
+        description:
+            'In this table you can see all public feature models. You can view them, or - if you are the owner - check analyses or delete them.',
+        elementCssSelector: '#feature-model-table',
+    },
+    {
+        title: 'Search feature models',
+        description:
+            'If there are already any feature models uploaded, you can search them here.',
+        elementCssSelector: '#feature-model-search',
+    },
+    {
+        title: 'Upload feature model',
+        description:
+            'With this button, you are able to upload a feature model to variability.dev. A wizard will pop up that allows you to either upload a single feature model, or bulk upload many feature models or upload even as a zip.',
+        elementCssSelector: '#feature-model-upload',
+    },
+    {
+        title: 'Create new feature model',
+        description:
+            'You can create a new feature model from scratch with this button.',
+        elementCssSelector: '#feature-model-create',
+    },
+    {
+        title: 'Load FM from local storage',
+        description:
+            '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();
+});
+</script>
+
+<style scoped>
+.analysis-width {
+    margin: 0 2rem;
+}
+</style>
diff --git a/frontendVue3/src/views/Profile.vue b/frontendVue3/src/views/Profile.vue
new file mode 100644
index 00000000..99747409
--- /dev/null
+++ b/frontendVue3/src/views/Profile.vue
@@ -0,0 +1,204 @@
+<template>
+    <div v-if="currentUser" class="mainView">
+        <div class="my-10 py-4 d-flex justify-center">
+            <v-card elevation="4" max-width="1000px" outlined>
+                <v-card-title>
+                    <v-row align="center">
+                        <v-col class="text-center" cols="12" md="auto">
+                            <v-avatar class="" color="primary" size="100">
+                                <v-icon dark size="80"> mdi-account</v-icon>
+                            </v-avatar>
+                        </v-col>
+                        <v-col cols="auto">
+                            <span
+                                v-if="breakpoints.mdAndUp"
+                                class="mb-2 text-h4"
+                                >{{ currentUser.email }}</span
+                            >
+                            <span v-else class="mb-2 text-h5">{{
+                                currentUser.email
+                            }}</span>
+                            <h6 class="text-h6">
+                                Institute:
+                                {{
+                                    currentUser.institute == ''
+                                        ? 'None'
+                                        : currentUser.institute
+                                }}
+                            </h6>
+                        </v-col>
+                    </v-row>
+                </v-card-title>
+
+                <v-divider></v-divider>
+
+                <v-card-text>
+                    <v-row align="center">
+                        <v-col
+                            :class="breakpoints.smAndDown ? 'pb-0' : ''"
+                            cols="12"
+                            md="3"
+                        >
+                            <h4>User since:</h4>
+                        </v-col>
+                        <v-col>
+                            <div style="word-break: break-all">
+                                {{
+                                    new Date(currentUser.date_joined)
+                                        .toLocaleString('en-US')
+                                        .substring(0, 9)
+                                }}
+                            </div>
+                        </v-col>
+                    </v-row>
+                    <v-row align="center">
+                        <v-col
+                            :class="breakpoints.smAndDown ? 'pb-0' : ''"
+                            cols="12"
+                            md="3"
+                        >
+                            <h4>Token:</h4>
+                        </v-col>
+                        <v-col>
+                            <div style="word-break: break-all">
+                                {{ authStore.accessToken }}
+                            </div>
+                        </v-col>
+                    </v-row>
+                    <v-row align="center">
+                        <v-col
+                            :class="breakpoints.smAndDown ? 'pb-0' : ''"
+                            cols="12"
+                            md="3"
+                        >
+                            <h4>ID:</h4>
+                        </v-col>
+                        <v-col>
+                            <div style="word-break: break-all">
+                                {{
+                                    currentUser.id
+                                        ? currentUser.id
+                                        : currentUser.pk
+                                }}
+                            </div>
+                        </v-col>
+                    </v-row>
+                    <v-row align="center">
+                        <v-col
+                            :class="breakpoints.smAndDown ? 'pb-0' : ''"
+                            cols="12"
+                            md="3"
+                        >
+                            <h4>Uploaded Feature Models:</h4>
+                        </v-col>
+                    </v-row>
+                    <v-row align="center" justify="center">
+                        <v-col cols="auto">
+                            <div class="timeline-div">
+                                <v-timeline
+                                    align="start"
+                                    class="ma-3"
+                                    density="compact"
+                                >
+                                    <v-timeline-item
+                                        v-for="elem in myConfirmedFeatureModels"
+                                        :key="elem.uploaded_at"
+                                        icon="mdi-file"
+                                        fill-dot
+                                        dot-color="primary"
+                                        size="large"
+                                    >
+                                        <v-card>
+                                            <v-card-title>
+                                                {{ elem.label }}
+                                            </v-card-title>
+                                            <v-card-subtitle>
+                                                Uploaded:
+                                                {{
+                                                    getFormattedDate(
+                                                        elem.uploaded_at
+                                                    )
+                                                }}
+                                            </v-card-subtitle>
+                                            <v-card-actions>
+                                                <v-btn
+                                                    class="mr-2"
+                                                    color="primary"
+                                                    outlined
+                                                    variant="text"
+                                                    prepend-icon="mdi-eye"
+                                                    size="small"
+                                                >
+                                                    Show
+                                                </v-btn>
+                                                <v-btn
+                                                    color="primary"
+                                                    outlined
+                                                    size="small"
+                                                    variant="text"
+                                                    prepend-icon="mdi-play"
+                                                >
+                                                    Analyse
+                                                </v-btn>
+                                            </v-card-actions>
+                                        </v-card>
+                                    </v-timeline-item>
+                                </v-timeline>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useAuthStore } from '@/store/auth';
+import { useAppStore } from '@/store/app';
+import { useFileStore } from '@/store/file';
+import { useRouter } from 'vue-router';
+import { useDisplay } from 'vuetify';
+import { storeToRefs } from 'pinia';
+
+const breakpoints = useDisplay();
+const router = useRouter();
+const fileStore = useFileStore();
+const appStore = useAppStore();
+const authStore = useAuthStore();
+
+const { currentUser } = storeToRefs(authStore);
+
+const { myConfirmedFeatureModels } = storeToRefs(fileStore);
+function getFormattedDate(date) {
+    const temp = new Date(date);
+    return (
+        ('0' + (temp.getMonth() + 1)).slice(-2) +
+        '/' +
+        ('0' + temp.getDate()).slice(-2) +
+        '/' +
+        ('' + temp.getFullYear()).slice(-2)
+    );
+}
+
+onMounted(() => {
+    if (!authStore.loggedIn || !authStore.currentUser) {
+        appStore.updateSnackbar(
+            'Please log in to view this page',
+            'info',
+            5000,
+            true
+        );
+        router.push('/login');
+    }
+    fileStore.fetchMyConfirmedFeatureModels();
+});
+</script>
+
+<style scoped>
+.timeline-div {
+    max-height: 400px;
+    overflow-y: scroll;
+}
+</style>
diff --git a/frontendVue3/vite.config.js b/frontendVue3/vite.config.js
new file mode 100644
index 00000000..2cd6d144
--- /dev/null
+++ b/frontendVue3/vite.config.js
@@ -0,0 +1,33 @@
+// Plugins
+import vue from '@vitejs/plugin-vue';
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+
+// Utilities
+import { defineConfig } from 'vite';
+import { fileURLToPath, URL } from 'node:url';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        vue({
+            template: { transformAssetUrls },
+        }),
+        // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+        vuetify({
+            autoImport: true,
+            styles: {
+                configFile: 'src/styles/settings.scss',
+            },
+        }),
+    ],
+    define: { 'process.env': {} },
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+        extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+    },
+    server: {
+        port: 3000,
+    },
+});

From a5e9f13a55135387626fbf827e8bfd4fdfd68e93 Mon Sep 17 00:00:00 2001
From: lukharsch <lukasharsch@web.de>
Date: Mon, 10 Apr 2023 19:35:46 +0200
Subject: [PATCH 5/8] Added FileDetail and fixed some stuff

---
 .../src/components/FeatureModelTable.vue      |   25 +-
 frontendVue3/src/components/Navbar.vue        |    4 +-
 frontendVue3/src/components/TutorialMode.vue  |  347 ++
 frontendVue3/src/router/index.js              |    9 +
 frontendVue3/src/store/file.js                |   21 +
 frontendVue3/src/styles/settings.scss         |    4 +
 frontendVue3/src/views/FileDetail.vue         | 3200 +++++++++++++++++
 7 files changed, 3602 insertions(+), 8 deletions(-)
 create mode 100644 frontendVue3/src/components/TutorialMode.vue
 create mode 100644 frontendVue3/src/views/FileDetail.vue

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index f629931a..5ef9be29 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -7,7 +7,6 @@
                 :items="items"
                 items-per-page="5"
                 :search="props.search"
-                @click:row="handleClick"
             >
                 <template v-slot:top>
                     <v-toolbar flat style="background-color: transparent">
@@ -139,6 +138,17 @@
                   </v-dialog>-->
                     </v-toolbar>
                 </template>
+                <template v-slot:item.label="{ item }">
+                    <v-btn
+                        variant="text"
+                        color="primary"
+                        append-icon="mdi-arrow-top-right-thin"
+                        @click="handleClick(item.raw)"
+                    >
+                        {{ item.raw.label }}
+                    </v-btn>
+                    <!-- <v-btn small rounded color="error" class="mr-2"> <v-icon>mdi-delete</v-icon></v-btn> -->
+                </template>
                 <template v-slot:item.actions="{ item }">
                     <v-btn
                         class="mr-2"
@@ -172,7 +182,6 @@
                 <template v-slot:item.id="{ item }">
                     {{ item.value }}
                 </template>
-                <template v-slot:no-data> {{ noDataText }} </template>
                 <template v-slot:item.tags="{ item }">
                     <div v-if="item.columns.tags.length <= 2">
                         <v-chip
@@ -208,6 +217,7 @@
                 <template v-slot:item.uploaded="{ item }">
                     {{ new Date(item.raw.uploaded_at).toLocaleString('en-US') }}
                 </template>
+                <template v-slot:no-data> {{ noDataText }} </template>
             </v-data-table>
         </v-card>
         <v-dialog v-model="createDialog" width="auto">
@@ -220,7 +230,9 @@
 import FileCreate from '@/components/upload_cards/FileCreate.vue';
 import { useAuthStore } from '@/store/auth';
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
+const router = useRouter();
 const authStore = useAuthStore();
 
 const props = defineProps({
@@ -314,10 +326,11 @@ function deleteItem(item) {
     this.dialogDelete = true;
 }
 function handleClick(value) {
-    /*this.$router.push({
-    name: 'FileDetail',
-    params: { id: value.id, slug: value.slug },
-  });*/
+    console.log(value);
+    router.push({
+        name: 'FileDetail',
+        params: { id: value.id, slug: value.slug },
+    });
 }
 function setHovered() {}
 </script>
diff --git a/frontendVue3/src/components/Navbar.vue b/frontendVue3/src/components/Navbar.vue
index 09d58f73..45e4bcea 100644
--- a/frontendVue3/src/components/Navbar.vue
+++ b/frontendVue3/src/components/Navbar.vue
@@ -5,8 +5,8 @@
                 <v-img
                     :src="
                         theme.global.current.value.dark
-                            ? 'ddueruem_logo_dark.svg'
-                            : 'ddueruem_logo.svg'
+                            ? '/ddueruem_logo_dark.svg'
+                            : '/ddueruem_logo.svg'
                     "
                     alt="logo"
                 />
diff --git a/frontendVue3/src/components/TutorialMode.vue b/frontendVue3/src/components/TutorialMode.vue
new file mode 100644
index 00000000..68c5feb5
--- /dev/null
+++ b/frontendVue3/src/components/TutorialMode.vue
@@ -0,0 +1,347 @@
+<template>
+    <v-dialog v-model="showDialog" persistent width="400">
+        <div id="tutorial-dialog">
+            <svg
+                v-if="!isMobile && isTop && isLeft"
+                height="50px"
+                width="400px"
+            >
+                <polygon
+                    points="0,0 120,50 220,50"
+                    :style="
+                        $vuetify.theme.dark
+                            ? 'fill: #121212; stroke: #ffffff; stroke-width: 1px'
+                            : 'fill: #ffffff; stroke: #121212; stroke-width: 1px'
+                    "
+                />
+            </svg>
+            <svg
+                v-if="!isMobile && isTop && !isLeft"
+                height="50px"
+                width="400px"
+            >
+                <polygon
+                    points="400,0 280,50 180,50"
+                    :style="
+                        $vuetify.theme.dark
+                            ? 'fill: #121212; stroke: #ffffff; stroke-width: 1px'
+                            : 'fill: #ffffff; stroke: #121212; stroke-width: 1px'
+                    "
+                />
+            </svg>
+            <v-card
+                v-if="step"
+                outlined
+                :style="
+                    $vuetify.theme.dark
+                        ? 'border: 1px solid white;'
+                        : 'border: 1px solid #121212'
+                "
+            >
+                <v-card-title>
+                    <span>{{ step.title }}</span>
+                    <v-spacer></v-spacer>
+                    <v-btn icon text @click="exit">
+                        <v-icon>mdi-close</v-icon>
+                    </v-btn>
+                </v-card-title>
+
+                <v-card-text>
+                    {{ step.description }}
+                </v-card-text>
+
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        :disabled="!beforeSteps.length"
+                        text
+                        color="error"
+                        @click="beforeStep"
+                        >Back</v-btn
+                    >
+                    <v-btn color="primary" text @click="nextStep"
+                        >Continue</v-btn
+                    >
+                </v-card-actions>
+            </v-card>
+            <v-card v-else>
+                <v-card-title>
+                    Do you want to start the tutorial?
+                </v-card-title>
+
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn text color="error" @click="$emit('close')"
+                        >Close</v-btn
+                    >
+                    <v-btn color="primary" text @click="startTutorial"
+                        >Start Tutorial</v-btn
+                    >
+                </v-card-actions>
+            </v-card>
+            <svg
+                v-if="!isMobile && !isTop && isLeft"
+                height="50px"
+                width="400px"
+            >
+                <polygon
+                    points="120,0 220,0 0,50"
+                    :style="
+                        $vuetify.theme.dark
+                            ? 'fill: #121212; stroke: #ffffff; stroke-width: 1px'
+                            : 'fill: #ffffff; stroke: #121212; stroke-width: 1px'
+                    "
+                />
+            </svg>
+            <svg
+                v-if="!isMobile && !isTop && !isLeft"
+                height="50px"
+                width="400px"
+            >
+                <polygon
+                    points="180,0 280,0 400,50"
+                    :style="
+                        $vuetify.theme.dark
+                            ? 'fill: #121212; stroke: #ffffff; stroke-width: 1px'
+                            : 'fill: #ffffff; stroke: #121212; stroke-width: 1px'
+                    "
+                />
+            </svg>
+        </div>
+    </v-dialog>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+
+const step = ref(undefined);
+const beforeSteps = ref([]);
+const isTop = ref(false);
+const isLeft = ref(false);
+const isMobile = ref(false);
+const counter = ref(0);
+
+const props = defineProps({
+    show: Boolean,
+    nextSteps: {
+        type: Array,
+        required: false,
+        default: () => [
+            {
+                title: 'Welcome to the tutorial!',
+                description:
+                    'You can restart the tutorial anytime by clicking on this icon on the left.',
+                elementCssSelector: '#tutorial-mode',
+            },
+            {
+                title: 'The menu',
+                description:
+                    "For a more precise description of the menu's icons click on this icon on the left.",
+                elementCssSelector: '#feature-model-toolbar-extend',
+            },
+            {
+                title: 'Your feature model',
+                description:
+                    'This is your main workspace. The feature model tree. You can move around and zoom in and out with your mouse or your fingers, depending on your platform.',
+                elementCssSelector: '#svg-container',
+            },
+            {
+                title: 'Your feature model',
+                description:
+                    'Feature model nodes are collapsed and uncollapsed when double-clicking. You can edit individual nodes with a right click and also use the corresponding context menu for other means of interacting with the feature model.',
+                elementCssSelector: '#svg-container',
+            },
+            {
+                title: 'Search',
+                description:
+                    'Feature models can get rather complex. To search for a node an navigate there automatically just click the magnifying glass above and enter your search query. In case there are multiple results you can navigate them with the arrows above.',
+                elementCssSelector: '#feature-model-search',
+            },
+            {
+                title: 'Your feature model',
+                description:
+                    "You may move around individual feature model nodes with 'drang and drop™'️. This does not allow semantic changes by default.",
+                elementCssSelector: '#svg-container',
+            },
+            {
+                title: 'Undo and redo',
+                description:
+                    'When making changes to a feature model it is important to have the possibility to revert changes. On the left you can find the undo and redo button.',
+                elementCssSelector: '#feature-model-toolbar-undo',
+            },
+            {
+                title: 'Save your changes',
+                description:
+                    'All of your modifications can be saved via the button on the left, even when you are offline!',
+                elementCssSelector: '#feature-model-toolbar-save',
+            },
+            {
+                title: 'Collaboration',
+                description:
+                    'You want to show others your feature model, or even edit it together with them? Just click the collaboration button on the left and share your thoughts!',
+                elementCssSelector: '#feature-model-toolbar-collaboration',
+            },
+            {
+                title: 'Constraints',
+                description:
+                    'To edit and view all of your cross-tree-constraints just click the button below. You may click individual constraints to highlight the corresponding feature model nodes in the tree above.',
+                elementCssSelector: '#feature-model-constraints',
+            },
+            {
+                title: 'Information',
+                description:
+                    'You may see individual statistics about your model by clicking the button below.',
+                elementCssSelector: '#feature-model-information',
+            },
+            {
+                title: 'Other settings',
+                description:
+                    'To change defaults and other settings just click on this icon on the left. You may also experiment around with all the other options. Remember the undo option.',
+                elementCssSelector: '#feature-model-toolbar-other-settings',
+            },
+        ],
+    },
+    localStorageIdentifier: {
+        type: String,
+        required: false,
+        default: 'featureModelTutorialCompleted',
+    },
+});
+
+onMounted(() => {
+    reset();
+});
+function startTutorial() {
+    isMobile.value = 'ontouchstart' in window;
+    step.value = this.nextSteps[this.counter];
+    counter.value++;
+    if (!isMobile.value) {
+        setBubblePosition();
+    }
+}
+
+function setBubblePosition() {
+    const tutorialDialog = document.querySelector('#tutorial-dialog');
+    if (this.isMobile) {
+        tutorialDialog.style.position = 'block';
+    } else {
+        tutorialDialog.style.position = 'absolute';
+    }
+    if (this.step.elementCssSelector) {
+        const rect = document
+            .querySelector(this.step.elementCssSelector)
+            .getBoundingClientRect();
+        const middleX = (rect.left - rect.right) / 2 + rect.right;
+        const middleY = (rect.bottom - rect.top) / 2 + rect.top;
+
+        tutorialDialog.style.left = null;
+        tutorialDialog.style.right = null;
+        tutorialDialog.style.top = null;
+        tutorialDialog.style.bottom = null;
+
+        if (
+            middleX + 400 >
+            (window.innerWidth || document.documentElement.clientWidth)
+        ) {
+            tutorialDialog.style.left = `calc(${middleX}px - 400px)`;
+            isLeft.value = false;
+        } else {
+            tutorialDialog.style.left = `calc(${middleX}px + 2rem)`;
+            isLeft.value = true;
+        }
+        if (
+            middleY + 200 >
+            (window.innerHeight || document.documentElement.clientHeight)
+        ) {
+            tutorialDialog.style.bottom = `calc(${
+                window.innerHeight - middleY
+            }px)`;
+            isTop.value = false;
+        } else {
+            tutorialDialog.style.top = middleY + 'px';
+            isTop.value = true;
+        }
+    }
+}
+
+function nextStep() {
+    if (this.nextSteps.length > this.counter) {
+        this.beforeSteps.unshift(this.step);
+        this.step = this.nextSteps[this.counter];
+        this.counter++;
+        if (!this.isMobile) {
+            this.setBubblePosition();
+        }
+    } else {
+        this.exit();
+    }
+}
+
+function exit() {
+    console.log('start');
+    if (!isMobile.value) {
+        const tutorialDialog = document.querySelector('#tutorial-dialog');
+        tutorialDialog.style.left = '';
+        tutorialDialog.style.top = '';
+        tutorialDialog.style.position = '';
+    }
+    step.value = undefined;
+    beforeSteps.value = [];
+    isTop.value = Boolean;
+    isLeft.value = Boolean;
+    isMobile.value = Boolean;
+    counter.value = 0;
+    localStorage[props.localStorageIdentifier] = true;
+    console.log('midd');
+    this.$emit('close');
+    console.log('end');
+}
+
+function beforeStep() {
+    counter.value = counter - 1;
+    //this.nextSteps.unshift(this.step);
+    step.value = beforeSteps.value.shift();
+    if (!isMobile.value) {
+        setBubblePosition();
+    }
+}
+
+function reset() {
+    if (!isMobile.value) {
+        const tutorialDialog = document.querySelector('#tutorial-dialog');
+        tutorialDialog.style.left = 0;
+        tutorialDialog.style.top = 0;
+        tutorialDialog.style.position = 'absolute';
+    }
+}
+
+watch(show, (newValue, oldValue) => {
+    if (oldValue) {
+        /*this.nextSteps = [
+        ...this.beforeSteps.reverse(),
+        this.step,
+        ...this.nextSteps,
+    ];*/
+        step.value = undefined;
+        beforeSteps.value = [];
+        isTop.value = false;
+        isLeft.value = false;
+        isMobile.value = false;
+        counter.value = 0;
+
+        // Reset position to 0 0 when restarting the tutorial again
+        reset();
+    }
+});
+</script>
+
+<style lang="scss">
+#tutorial-dialog {
+    max-width: 400px;
+    transition: all 0.75s;
+
+    > .v-card {
+        margin-top: -10px;
+    }
+}
+</style>
diff --git a/frontendVue3/src/router/index.js b/frontendVue3/src/router/index.js
index 7574c6fe..46fa8e15 100644
--- a/frontendVue3/src/router/index.js
+++ b/frontendVue3/src/router/index.js
@@ -38,6 +38,15 @@ const routes = [
         component: () =>
             import(/* webpackChunkName: "home" */ '@/views/DSGVO.vue'),
     },
+    {
+        path: '/files/:id/:slug',
+        name: 'FileDetail',
+        component: () =>
+            import(/* webpackChunkName: "home" */ '@/views/FileDetail.vue'),
+        meta: {
+            title: 'File Detail',
+        },
+    },
 ];
 
 const router = createRouter({
diff --git a/frontendVue3/src/store/file.js b/frontendVue3/src/store/file.js
index e2de74aa..057fb01a 100644
--- a/frontendVue3/src/store/file.js
+++ b/frontendVue3/src/store/file.js
@@ -39,6 +39,27 @@ export const useFileStore = defineStore('file', {
                 }
             );
         },
+        async deleteFeatureModel(id) {
+            const appStore = useAppStore();
+            await api
+                .delete(`${API_URL}files/${id}/`)
+                .then(() => {
+                    appStore.updateSnackbar(
+                        'File deleted successfully!',
+                        'success',
+                        5000,
+                        true
+                    );
+                })
+                .catch((error) => {
+                    appStore.updateSnackbar(
+                        'Error: ' + error.message,
+                        'error',
+                        5000,
+                        true
+                    );
+                });
+        },
         async fetchFeatureModelOfFamily(value) {
             await api
                 .get(`${API_URL}files/uploaded/confirmed/?family=${value}`)
diff --git a/frontendVue3/src/styles/settings.scss b/frontendVue3/src/styles/settings.scss
index 4e0191f5..344c490c 100644
--- a/frontendVue3/src/styles/settings.scss
+++ b/frontendVue3/src/styles/settings.scss
@@ -8,3 +8,7 @@
 // @use 'vuetify' with (
 //   $color-pack: false
 // );
+
+.v-btn {
+  text-transform: none;
+}
\ No newline at end of file
diff --git a/frontendVue3/src/views/FileDetail.vue b/frontendVue3/src/views/FileDetail.vue
new file mode 100644
index 00000000..ceeccf7a
--- /dev/null
+++ b/frontendVue3/src/views/FileDetail.vue
@@ -0,0 +1,3200 @@
+<template>
+    <div class="mainView">
+        <h3 class="text-h3 mb-2 mt-8">
+            Feature Model:
+            <span v-if="loading">
+                <v-progress-circular
+                    indeterminate
+                    v-if="loading"
+                ></v-progress-circular>
+            </span>
+            <span v-else>
+                {{ file.label }}
+            </span>
+        </h3>
+        <v-row justify="space-between">
+            <v-col cols="12" md="6" id="feature-model-details">
+                <h5 class="text-h5 mb-4">Details and more information</h5>
+
+                <v-list lines="two">
+                    <v-list-item>
+                        <template v-slot:prepend>
+                            <v-icon
+                                color="primary"
+                                icon="mdi-information"
+                            ></v-icon>
+                        </template>
+
+                        <v-list-item-title>
+                            {{ loading ? '...' : file.label }}
+                        </v-list-item-title>
+                        <v-list-item-subtitle>Label</v-list-item-subtitle>
+
+                        <template v-slot:append>
+                            <v-list-item-action end>
+                                <v-btn
+                                    icon="mdi-pencil"
+                                    variant="tonal"
+                                    color="primary"
+                                    size="small"
+                                >
+                                </v-btn>
+                            </v-list-item-action>
+                        </template>
+                    </v-list-item>
+
+                    <v-list-item>
+                        <template v-slot:prepend>
+                            <v-icon></v-icon>
+                        </template>
+                        <v-list-item-title>
+                            {{ loading ? '...' : file.description }}
+                        </v-list-item-title>
+                        <v-list-item-subtitle>
+                            Description
+                        </v-list-item-subtitle>
+
+                        <template v-slot:append>
+                            <v-list-item-action>
+                                <v-btn
+                                    icon="mdi-pencil"
+                                    variant="tonal"
+                                    color="primary"
+                                    size="small"
+                                >
+                                </v-btn>
+                            </v-list-item-action>
+                        </template>
+                    </v-list-item>
+
+                    <v-divider inset></v-divider>
+
+                    <v-list-item>
+                        <template v-slot:prepend>
+                            <v-icon color="primary" icon="mdi-license"></v-icon>
+                        </template>
+                        <v-list-item-title>
+                            {{ loading ? '...' : file.license.label }}
+                        </v-list-item-title>
+                        <v-list-item-subtitle>License</v-list-item-subtitle>
+
+                        <!--						<v-list-item-action>
+  <v-btn icon>
+    <v-icon>mdi-pencil</v-icon>
+  </v-btn>
+</v-list-item-action>-->
+                    </v-list-item>
+
+                    <v-divider inset></v-divider>
+
+                    <v-list-item>
+                        <template v-slot:prepend>
+                            <v-icon color="primary" icon="mdi-tag"></v-icon>
+                        </template>
+
+                        <v-list-item-title v-if="!loading">
+                            <v-chip
+                                class="mr-2"
+                                v-for="tag in file.tags"
+                                :key="tag.id"
+                                size="small"
+                            >
+                                {{ tag.label }}
+                            </v-chip>
+                        </v-list-item-title>
+                        <v-list-item-title v-else>...</v-list-item-title>
+                        <v-list-item-subtitle>Tags</v-list-item-subtitle>
+
+                        <template v-slot:append>
+                            <v-list-item-action>
+                                <v-btn
+                                    icon="mdi-pencil"
+                                    variant="tonal"
+                                    color="primary"
+                                    size="small"
+                                >
+                                </v-btn>
+                            </v-list-item-action>
+                        </template>
+                    </v-list-item>
+                    <v-divider inset></v-divider>
+                    <v-list-item>
+                        <template v-slot:prepend>
+                            <v-icon
+                                color="primary"
+                                icon="mdi-calendar"
+                            ></v-icon>
+                        </template>
+
+                        <v-list-item-title v-if="!loading">
+                            {{
+                                new Date(file.uploaded_at).toLocaleString(
+                                    'en-US'
+                                )
+                            }}
+                        </v-list-item-title>
+                        <v-list-item-title v-else>...</v-list-item-title>
+                        <v-list-item-subtitle>
+                            Uploaded on
+                        </v-list-item-subtitle>
+                    </v-list-item>
+                    <v-divider inset></v-divider>
+                    <v-list-item>
+                        <template v-slot:prepend>
+                            <v-icon
+                                color="primary"
+                                icon="mdi-human-male-female-child"
+                            ></v-icon>
+                        </template>
+
+                        <v-list-item-content>
+                            <v-list-item-title>
+                                {{ loading ? '...' : file.family.label }} ({{
+                                    loading ? '...' : file.version
+                                }})
+                            </v-list-item-title>
+                            <v-list-item-subtitle>
+                                Family and version
+                            </v-list-item-subtitle>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+                <div
+                    class="mt-3 d-flex justify-space-between align-center"
+                    id="feature-model-actions"
+                >
+                    <div>
+                        <div class="d-inline-block mr-2">
+                            <v-btn
+                                color="primary"
+                                variant="tonal"
+                                prepend-icon="mdi-eye"
+                                :to="'/feature-model/' + file.id"
+                            >
+                                View Model
+                            </v-btn>
+                        </div>
+                        <div class="d-inline-block">
+                            <v-btn
+                                variant="tonal"
+                                color="primary"
+                                @click="
+                                    router.push({
+                                        name: 'FamilyDetail',
+                                        params: {
+                                            id: file.family.id,
+                                            slug: file.family.slug,
+                                        },
+                                    })
+                                "
+                                prepend-icon="mdi-human-male-female-child"
+                            >
+                                See Family
+                            </v-btn>
+                        </div>
+                    </div>
+                    <div class="d-inline-block">
+                        <v-btn
+                            variant="tonal"
+                            color="error"
+                            :disabled="file.owner === false"
+                            @click="deleteItem(item)"
+                            prepend-icon="mdi-delete"
+                        >
+                            Delete Model
+                        </v-btn>
+                    </div>
+                </div>
+            </v-col>
+            <v-col cols="12" md="6">
+                <div id="feature-model-artifacts">
+                    <h5 class="text-h5 mb-4">Artifacts (tbd)</h5>
+                    <div class="my-3">
+                        <v-list rounded>
+                            <v-subheader>REPORTS</v-subheader>
+                            <v-list-item
+                                v-for="(item, i) in artifacts"
+                                :key="i"
+                            >
+                                <template v-slot:prepend>
+                                    <v-icon
+                                        color="primary"
+                                        icon="mdi-file-document-outline"
+                                    ></v-icon>
+                                </template>
+                                <v-list-item-title>
+                                    {{ item.title }}
+                                </v-list-item-title>
+                                <v-list-item-subtitle>
+                                    {{ item.subtitle }}
+                                </v-list-item-subtitle>
+                                <template v-slot:append>
+                                    <v-list-item-action
+                                        style="flex-direction: row"
+                                    >
+                                        <v-btn
+                                            icon="mdi-download"
+                                            variant="tonal"
+                                            color="success"
+                                            size="small"
+                                            class="mr-2"
+                                        >
+                                        </v-btn>
+                                        <v-btn
+                                            icon="mdi-eye"
+                                            variant="tonal"
+                                            color="primary"
+                                            size="small"
+                                            @click.stop="
+                                                showArtifactDialog(item)
+                                            "
+                                        >
+                                        </v-btn>
+                                    </v-list-item-action>
+                                </template>
+                            </v-list-item>
+                        </v-list>
+                    </div>
+                </div>
+                <div class="my-3" id="feature-model-analysis-progress">
+                    <div
+                        class="d-flex justify-center flex-column align-center my-3"
+                    >
+                        <span>Analyses Progress:</span>
+                        <div class="pa-0" style="width: 100%">
+                            <div
+                                :style="`width: ${getStati.success.percentage}%!important`"
+                                class="d-inline-block"
+                            >
+                                <v-tooltip location="bottom">
+                                    <template v-slot:activator="{ props }">
+                                        <v-progress-linear
+                                            height="15"
+                                            model-value="100"
+                                            color="success"
+                                            v-bind="props"
+                                        />
+                                    </template>
+                                    <span>
+                                        Success:
+                                        {{ getStati.success.absolute }} /
+                                        {{ getStati.amount }}
+                                    </span>
+                                </v-tooltip>
+                            </div>
+                            <div
+                                :style="`width: ${getStati.error.percentage}%!important`"
+                                class="d-inline-block"
+                            >
+                                <v-tooltip location="bottom">
+                                    <template v-slot:activator="{ props }">
+                                        <v-progress-linear
+                                            height="15"
+                                            model-value="100"
+                                            color="error"
+                                            v-bind="props"
+                                        />
+                                    </template>
+                                    <span>
+                                        Error:
+                                        {{ getStati.error.absolute }} /
+                                        {{ getStati.amount }}
+                                    </span>
+                                </v-tooltip>
+                            </div>
+                            <div
+                                :style="`width: ${getStati.progress.percentage}%!important`"
+                                class="d-inline-block"
+                            >
+                                <v-tooltip location="bottom">
+                                    <template v-slot:activator="{ props }">
+                                        <v-progress-linear
+                                            height="15"
+                                            model-value="100"
+                                            color="primary"
+                                            v-bind="props"
+                                        />
+                                    </template>
+                                    <span>
+                                        In progress:
+                                        {{ getStati.progress.absolute }} /
+                                        {{ getStati.amount }}
+                                    </span>
+                                </v-tooltip>
+                            </div>
+                        </div>
+                    </div>
+                    <v-data-table
+                        :headers="headersAnalysis"
+                        :items="itemsAnalysis"
+                        :loading="loading"
+                        :search="searchAnalysis"
+                        items-per-page="5"
+                        class="elevation-1"
+                    >
+                        <template v-slot:top>
+                            <v-toolbar
+                                flat
+                                style="background-color: transparent"
+                            >
+                                <v-toolbar-title class="hidden-sm-and-down"
+                                    >Analyses
+                                </v-toolbar-title>
+                                <v-divider
+                                    class="mx-4 hidden-sm-and-down"
+                                    inset
+                                    vertical
+                                ></v-divider>
+                                <v-spacer class="hidden-sm-and-down"></v-spacer>
+                                <v-text-field
+                                    density="comfortable"
+                                    v-model="searchAnalysis"
+                                    append-inner-icon="mdi-magnify"
+                                    variant="filled"
+                                    clear-icon="mdi-download"
+                                    hide-details
+                                    label="Search"
+                                    single-line
+                                    class="mr-4"
+                                >
+                                </v-text-field>
+                            </v-toolbar>
+                        </template>
+                        <template v-slot:item.status="{ item }">
+                            <v-progress-circular
+                                v-if="item.raw.status === 0"
+                                size="24"
+                                width="3"
+                                indeterminate
+                                color="primary"
+                            ></v-progress-circular>
+                            <v-icon
+                                v-else-if="item.raw.status === 1"
+                                color="success"
+                            >
+                                mdi-check
+                            </v-icon>
+                            <v-icon v-else color="error"> mdi-cancel</v-icon>
+                        </template>
+                        <template v-slot:item.id="{ index }">
+                            {{ index + 1 }}
+                        </template>
+                    </v-data-table>
+                </div>
+            </v-col>
+        </v-row>
+        <v-dialog v-model="dialogDelete" max-width="400px">
+            <v-card>
+                <v-card-title class="text-h5" style="word-break: break-word">
+                    Are you sure you want to delete this feature model?
+                </v-card-title>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="primary" text @click="closeDelete"
+                        >Cancel
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        :loading="removeLoading"
+                        color="primary"
+                        text
+                        @click="deleteItemConfirm"
+                    >
+                        Delete
+                    </v-btn>
+                    <v-spacer></v-spacer>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+        <v-dialog
+            v-model="dialogArtifact"
+            fullscreen
+            transition="dialog-bottom-transition"
+        >
+            <v-toolbar dark>
+                <v-icon class="mr-2">mdi-file-compare</v-icon>
+                <v-toolbar-title
+                    >View and compare Feature Model artifacts:
+                    <span class="font-weight-bold">{{
+                        selectedArtifact.title
+                    }}</span></v-toolbar-title
+                >
+                <v-spacer></v-spacer>
+                <v-toolbar-items>
+                    <v-btn icon dark @click="dialogArtifact = false">
+                        <v-icon>mdi-close</v-icon>
+                    </v-btn>
+                </v-toolbar-items>
+            </v-toolbar>
+            <v-card>
+                <v-card-text>
+                    <v-row class="ma-1">
+                        <v-col
+                            cols="12"
+                            :md="isRightFmSelected ? 6 : 8"
+                            :lg="isRightFmSelected ? 6 : 9"
+                            class="pa-2"
+                        >
+                            <h6 class="text-h6">
+                                Feature Model: {{ file.label }}
+                            </h6>
+
+                            <v-data-table
+                                v-if="selectedArtifact.title === 'CSV'"
+                                :headers="headerCsvArtifact"
+                                :items="itemsCsvArtifact"
+                                :items-per-page="10"
+                            ></v-data-table>
+                            <div v-else>
+                                <textarea
+                                    v-model="xmlFile"
+                                    style="
+                                        border: none;
+                                        width: 100%;
+                                        height: 500px;
+                                        color: white;
+                                    "
+                                >
+                                </textarea>
+                            </div>
+                            <v-btn color="success">
+                                <v-icon left>mdi-download</v-icon>
+                                Download Artifact
+                            </v-btn>
+                        </v-col>
+                        <v-col
+                            v-if="!isRightFmSelected"
+                            cols="12"
+                            md="4"
+                            lg="3"
+                            class="pa-2"
+                            style="border: 2px dashed grey"
+                        >
+                            <v-sheet
+                                v-if="!shouldCompare"
+                                height="300px"
+                                min-height="190px"
+                                width="100%"
+                                class="d-flex justify-center align-center pointer-on-hover"
+                                @click="compare"
+                            >
+                                <div class="text-h6 text-info text-center">
+                                    Click to compare with another feature model
+                                </div>
+                            </v-sheet>
+                            <div v-else>
+                                <v-btn
+                                    icon
+                                    @click="shouldCompare = false"
+                                    class="mr-2"
+                                >
+                                    <v-icon>mdi-arrow-left</v-icon>
+                                </v-btn>
+                                <span class="text-subtitle-1"
+                                    >My Feature Models</span
+                                >
+                                <v-progress-circular
+                                    style="display: block"
+                                    indeterminate
+                                    color="primary"
+                                    v-if="loadingComparableFM"
+                                ></v-progress-circular>
+                                <v-list
+                                    rounded
+                                    v-else
+                                    height="300px"
+                                    style="overflow-y: auto"
+                                >
+                                    <v-list-item-group
+                                        v-model="selectedRightFM"
+                                        color="primary"
+                                    >
+                                        <v-list-item
+                                            v-for="(item, i) in getMyFM"
+                                            :key="i"
+                                        >
+                                            <v-list-item-avatar>
+                                                <v-icon>
+                                                    mdi-family-tree
+                                                </v-icon>
+                                            </v-list-item-avatar>
+                                            <v-list-item-content>
+                                                <v-list-item-title>
+                                                    {{ item.label }}
+                                                </v-list-item-title>
+                                                <v-list-item-subtitle>
+                                                    {{
+                                                        new Date(
+                                                            item.uploaded_at
+                                                        ).toLocaleString(
+                                                            'en-US'
+                                                        )
+                                                    }}
+                                                </v-list-item-subtitle>
+                                            </v-list-item-content>
+                                        </v-list-item>
+                                    </v-list-item-group>
+                                </v-list>
+                            </div>
+                        </v-col>
+                        <v-col
+                            v-else
+                            cols="12"
+                            md="6"
+                            lg="6"
+                            class="pa-2"
+                            style="border-left: 2px solid white"
+                        >
+                            <h6 class="text-h6">
+                                <v-btn
+                                    color="inherit"
+                                    icon
+                                    @click="selectedRightFM = -1"
+                                    class="mr-2"
+                                >
+                                    <v-icon>mdi-arrow-left</v-icon>
+                                </v-btn>
+                                {{ getMyFM[selectedRightFM].label }}
+                            </h6>
+                            <v-data-table
+                                v-if="selectedArtifact.title === 'CSV'"
+                                :headers="headerCsvArtifact"
+                                :items="itemsCsvArtifact"
+                                :items-per-page="10"
+                            ></v-data-table>
+                            <div v-else>
+                                <textarea
+                                    v-model="xmlFile"
+                                    style="
+                                        border: none;
+                                        width: 100%;
+                                        height: 500px;
+                                        color: white;
+                                    "
+                                >
+                                </textarea>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
+        <tutorial-mode
+            :show="showTutorial"
+            @close="showTutorial = false"
+            :next-steps="tutorialSteps"
+            local-storage-identifier="fileDetailTutorialCompleted"
+        ></tutorial-mode>
+        <v-btn
+            id="tutorial-mode"
+            position="fixed"
+            color="primary"
+            @click="showTutorial = true"
+            icon="mdi-school"
+            style="bottom: 70px; right: 20px"
+        >
+        </v-btn>
+    </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue';
+import api from '@/services/api.service';
+import { useFileStore } from '@/store/file';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+const fileStore = useFileStore();
+
+const API_URL = import.meta.env.VITE_APP_DOMAIN;
+
+let file = reactive({});
+const loading = ref(true);
+const dialogDelete = ref(false);
+const dialogArtifact = ref(false);
+const shouldCompare = ref(false);
+const loadingComparableFM = ref(false);
+const selectedRightFM = ref(-1);
+const selectedArtifact = {};
+const rightFmIsSelected = ref(false);
+const removeLoading = ref(false);
+const searchAnalysis = ref('');
+const headersAnalysis = [
+    /*{
+        title: 'ID',
+        align: 'start',
+        sortable: false,
+        key: 'id',
+    },*/
+    { title: 'Name', key: 'name' },
+    { title: 'Query', key: 'query' },
+    { title: 'Status', key: 'status' },
+];
+const itemsAnalysis = [
+    {
+        id: 1,
+        name: 'first analysis',
+        query: 'count nodes',
+        status: 0,
+    },
+    {
+        id: 2,
+        name: 'complex analysis',
+        query: 'calculate purpose of life --force',
+        status: 1,
+    },
+    {
+        id: 42,
+        name: 'another analysis',
+        query: 'foo bar',
+        status: 0,
+    },
+];
+const showTutorial = ref(false);
+const tutorialSteps = [
+    {
+        title: 'Welcome to the tutorial!',
+        description:
+            'You can restart the tutorial anytime by clicking on this button.',
+        elementCssSelector: '#tutorial-mode',
+    },
+    {
+        title: 'Feature model details',
+        description:
+            'Here you can see details and more information about the feature model. You can also view the model and the family. If you are the owner of the model, you can also edit aspects like name or description.',
+        elementCssSelector: '#feature-model-details',
+    },
+    {
+        title: 'Feature model actions',
+        description:
+            'With those action buttons, you are able to view the model or the family, or - if you are the owner of the model - delete it.',
+        elementCssSelector: '#feature-model-actions',
+    },
+    {
+        title: 'The Analyses and progress',
+        description:
+            "After uploading a feature model, some predefined analyses will run on them automatically. In this table you'll see those analyses as well as the progress (done, in progress, failed).",
+        elementCssSelector: '#feature-model-analysis-progress',
+    },
+    {
+        title: 'Feature model artifacts',
+        description:
+            "In this section you'll find artifacts of the feature model. Those artifacts - which are basically files - are automatically generated after the analyses are done. You can view them here.",
+        elementCssSelector: '#feature-model-artifacts',
+    },
+];
+const artifacts = [
+    {
+        title: 'CSV',
+        subtitle: 'Displaying CSV of feature model',
+    },
+    {
+        title: 'XML',
+        subtitle: 'Displaying XML of feature model',
+    },
+    {
+        title: 'Complex Document',
+        subtitle: 'Generated from analysis: complex analysis',
+    },
+];
+const headerCsvArtifact = [
+    { text: 'Input File', value: 'input_file' },
+    { text: 'Input Hash', value: 'input_hash' },
+    { text: 'SVO', value: 'svo' },
+    { text: 'DVO', value: 'dvo' },
+    { text: 'DVO Time', value: 'dvo_time' },
+    { text: 'BDD Compiler', value: 'bdd_compiler' },
+    { text: 'BDD Bootstrap', value: 'bdd_bootstrap' },
+    { text: 'BDD Compile', value: 'bdd_compile' },
+    { text: 'BDD Timeout', value: 'bdd_timeout' },
+    { text: 'BDD Size', value: 'bdd_size' },
+];
+const itemsCsvArtifact = [
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.006,
+        bdd_compile: 44.813,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: '',
+        dvo_time: '',
+        bdd_compiler: '',
+        bdd_bootstrap: null,
+        bdd_compile: null,
+        bdd_timeout: null,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.008,
+        bdd_compile: 45.037,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: '',
+        dvo_time: '',
+        bdd_compiler: '',
+        bdd_bootstrap: null,
+        bdd_compile: null,
+        bdd_timeout: null,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.01,
+        bdd_compile: 32.266,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.006,
+        bdd_compile: 31.951,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: '',
+        dvo_time: '',
+        bdd_compiler: '',
+        bdd_bootstrap: null,
+        bdd_compile: null,
+        bdd_timeout: null,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.006,
+        bdd_compile: 37.242,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: '',
+        dvo_time: '',
+        bdd_compiler: '',
+        bdd_bootstrap: null,
+        bdd_compile: null,
+        bdd_timeout: null,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force',
+        dvo: '',
+        dvo_time: '',
+        bdd_compiler: '',
+        bdd_bootstrap: null,
+        bdd_compile: null,
+        bdd_timeout: null,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.006,
+        bdd_compile: 36.179,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.01,
+        bdd_compile: 34.675,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.009,
+        bdd_compile: 46.592,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: '',
+        dvo_time: '',
+        bdd_compiler: '',
+        bdd_bootstrap: null,
+        bdd_compile: null,
+        bdd_timeout: null,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.007,
+        bdd_compile: 40.298,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.005,
+        bdd_compile: 44.059,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.006,
+        bdd_compile: 36.9,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.006,
+        bdd_compile: 41.094,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.008,
+        bdd_compile: 35.726,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-best',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.01,
+        bdd_compile: 27.533,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.01,
+        bdd_compile: 32.349,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.01,
+        bdd_compile: 41.088,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.005,
+        bdd_compile: 34.342,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: '',
+        dvo_time: '',
+        bdd_compiler: '',
+        bdd_bootstrap: null,
+        bdd_compile: null,
+        bdd_timeout: null,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.01,
+        bdd_compile: 30.061,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.009,
+        bdd_compile: 35.78,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.011,
+        bdd_compile: 36.598,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.009,
+        bdd_compile: 36.843,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: 'SIFTC',
+        dvo_time: '',
+        bdd_compiler: 'cudd',
+        bdd_bootstrap: 0.01,
+        bdd_compile: 31.673,
+        bdd_timeout: false,
+        bdd_size: '',
+    },
+    {
+        input_file: 'busybox.dimacs',
+        input_hash: '287b501faf4c816afd0fe517c85ab7ed',
+        svo: 'force-avg',
+        dvo: '',
+        dvo_time: '',
+        bdd_compiler: '',
+        bdd_bootstrap: null,
+        bdd_compile: null,
+        bdd_timeout: null,
+        bdd_size: '',
+    },
+];
+const xmlFile = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<feature_model name="FeatureIDE model">
+    <feature_tree>
+:r __Root__(__Root__)
+\t:o FEATURE_INSMOD_VERSION_CHECKING(FEATURE_INSMOD_VERSION_CHECKING)
+\t:o NC_EXTRA(NC_EXTRA)
+\t:o FEATURE_SH_STANDALONE(FEATURE_SH_STANDALONE)
+\t:o STATIC(STATIC)
+\t:o FEATURE_LESS_LINENUMS(FEATURE_LESS_LINENUMS)
+\t:o RAIDAUTORUN(RAIDAUTORUN)
+\t:o GETENFORCE(GETENFORCE)
+\t:o FEATURE_CHAT_TTY_HIFI(FEATURE_CHAT_TTY_HIFI)
+\t:o HEXDUMP(HEXDUMP)
+\t:o FEATURE_MOUNT_VERBOSE(FEATURE_MOUNT_VERBOSE)
+\t:o FEATURE_FIND_INUM(FEATURE_FIND_INUM)
+\t:o EXPAND(EXPAND)
+\t:o RUNLEVEL(RUNLEVEL)
+\t:o HDPARM(HDPARM)
+\t:o INIT_TERMINAL_TYPE(INIT_TERMINAL_TYPE)
+\t:o AR(AR)
+\t:o FEATURE_EJECT_SCSI(FEATURE_EJECT_SCSI)
+\t:o SED(SED)
+\t:o SENDMAIL(SENDMAIL)
+\t:o SETFILES(SETFILES)
+\t:o FEATURE_VI_SEARCH(FEATURE_VI_SEARCH)
+\t:o SEQ(SEQ)
+\t:o FEATURE_FBSET_FANCY(FEATURE_FBSET_FANCY)
+\t:o WATCH(WATCH)
+\t:o TFTP(TFTP)
+\t:o FEATURE_TOP_SMP_PROCESS(FEATURE_TOP_SMP_PROCESS)
+\t:o HUSH_FUNCTIONS(HUSH_FUNCTIONS)
+\t:o FEATURE_CROND_DIR(FEATURE_CROND_DIR)
+\t:o FEATURE_FBSET_READMODE(FEATURE_FBSET_READMODE)
+\t:o HALT(HALT)
+\t:o INSTALL_APPLET_SCRIPT_WRAPPERS(INSTALL_APPLET_SCRIPT_WRAPPERS)
+\t:o FLASHCP(FLASHCP)
+\t:o FEATURE_WGET_TIMEOUT(FEATURE_WGET_TIMEOUT)
+\t:o BRCTL(BRCTL)
+\t:o FEATURE_DF_FANCY(FEATURE_DF_FANCY)
+\t:o CP(CP)
+\t:o FEATURE_LS_FILETYPES(FEATURE_LS_FILETYPES)
+\t:o NBDCLIENT(NBDCLIENT)
+\t:o FEATURE_ADDUSER_LONG_OPTIONS(FEATURE_ADDUSER_LONG_OPTIONS)
+\t:o FEATURE_UDHCP_PORT(FEATURE_UDHCP_PORT)
+\t:o DNSD(DNSD)
+\t:o HUSH_LOCAL(HUSH_LOCAL)
+\t:o DC(DC)
+\t:o DD(DD)
+\t:o STTY(STTY)
+\t:o DF(DF)
+\t:o UNICODE_BIDI_SUPPORT(UNICODE_BIDI_SUPPORT)
+\t:o FEATURE_TAR_TO_COMMAND(FEATURE_TAR_TO_COMMAND)
+\t:o LOAD_POLICY(LOAD_POLICY)
+\t:o TUNE2FS(TUNE2FS)
+\t:o FEATURE_FANCY_TAIL(FEATURE_FANCY_TAIL)
+\t:o IPADDR(IPADDR)
+\t:o DU(DU)
+\t:o FEATURE_SHOW_THREADS(FEATURE_SHOW_THREADS)
+\t:o FEATURE_READLINK_FOLLOW(FEATURE_READLINK_FOLLOW)
+\t:o LOGNAME(LOGNAME)
+\t:o FEATURE_FIND_PRUNE(FEATURE_FIND_PRUNE)
+\t:o INSTALL_SH_APPLET_SCRIPT_WRAPPER(INSTALL_SH_APPLET_SCRIPT_WRAPPER)
+\t:o ED(ED)
+\t:o FEATURE_TFTP_GET(FEATURE_TFTP_GET)
+\t:o MDEV(MDEV)
+\t:o HUSH_SAVEHISTORY(HUSH_SAVEHISTORY)
+\t:o NC_110_COMPAT(NC_110_COMPAT)
+\t:o FEATURE_STAT_FORMAT(FEATURE_STAT_FORMAT)
+\t:o FEATURE_XARGS_SUPPORT_TERMOPT(FEATURE_XARGS_SUPPORT_TERMOPT)
+\t:o PASSWORD_MINLEN(PASSWORD_MINLEN)
+\t:o CHROOT(CHROOT)
+\t:o SETSID(SETSID)
+\t:o FEATURE_LAST_SMALL_alt(FEATURE_LAST_SMALL_alt)
+\t:o UBIATTACH(UBIATTACH)
+\t:o FEATURE_COMPRESS_USAGE(FEATURE_COMPRESS_USAGE)
+\t:o UNLZMA(UNLZMA)
+\t:o FEATURE_HDPARM_GET_IDENTITY(FEATURE_HDPARM_GET_IDENTITY)
+\t:o FEATURE_FIND_NEWER(FEATURE_FIND_NEWER)
+\t:o TUNCTL(TUNCTL)
+\t:o FEATURE_KILL_REMOVED(FEATURE_KILL_REMOVED)
+\t:o BASENAME(BASENAME)
+\t:o MKFIFO(MKFIFO)
+\t:o UNCOMPRESS(UNCOMPRESS)
+\t:o MD5SUM(MD5SUM)
+\t:o FEATURE_LS_COLOR_IS_DEFAULT(FEATURE_LS_COLOR_IS_DEFAULT)
+\t:o UNEXPAND(UNEXPAND)
+\t:o REMOVE_SHELL(REMOVE_SHELL)
+\t:o root(root)
+\t:o FEATURE_AUTOWIDTH(FEATURE_AUTOWIDTH)
+\t:o FEATURE_MOUNT_NFS(FEATURE_MOUNT_NFS)
+\t:o HUSH_IF(HUSH_IF)
+\t:o BB_SYSCTL(BB_SYSCTL)
+\t:o FEATURE_FIND_TYPE(FEATURE_FIND_TYPE)
+\t:o FEATURE_HTTPD_SET_REMOTE_PORT_TO_ENV(FEATURE_HTTPD_SET_REMOTE_PORT_TO_ENV)
+\t:o FEATURE_MINIX2(FEATURE_MINIX2)
+\t:o FEATURE_BOOTCHARTD_BLOATED_HEADER(FEATURE_BOOTCHARTD_BLOATED_HEADER)
+\t:o TELNET(TELNET)
+\t:o FEATURE_SEAMLESS_LZMA(FEATURE_SEAMLESS_LZMA)
+\t:o FEATURE_IP_RULE(FEATURE_IP_RULE)
+\t:o HOSTNAME(HOSTNAME)
+\t:o FEATURE_HTTPD_RANGES(FEATURE_HTTPD_RANGES)
+\t:o FGCONSOLE(FGCONSOLE)
+\t:o FEATURE_FIND_GROUP(FEATURE_FIND_GROUP)
+\t:o HD(HD)
+\t:o TRACEROUTE(TRACEROUTE)
+\t:o HUSH_MODE_X(HUSH_MODE_X)
+\t:o DMALLOC_alt(DMALLOC_alt)
+\t:o FEATURE_XARGS_SUPPORT_ZERO_TERM(FEATURE_XARGS_SUPPORT_ZERO_TERM)
+\t:o FEATURE_FIND_REGEX(FEATURE_FIND_REGEX)
+\t:o UDHCPC_DEFAULT_SCRIPT(UDHCPC_DEFAULT_SCRIPT)
+\t:o MODPROBE_SMALL(MODPROBE_SMALL)
+\t:o DELUSER(DELUSER)
+\t:o FEATURE_FLOAT_SLEEP(FEATURE_FLOAT_SLEEP)
+\t:o ASH_MAIL(ASH_MAIL)
+\t:o CTTYHACK(CTTYHACK)
+\t:o SETCONSOLE(SETCONSOLE)
+\t:o FEATURE_VI_DOT_CMD(FEATURE_VI_DOT_CMD)
+\t:o BASE64(BASE64)
+\t:o FDISK(FDISK)
+\t:o UNZIP(UNZIP)
+\t:o ID(ID)
+\t:o FEATURE_DEVFS(FEATURE_DEVFS)
+\t:o NOMMU(NOMMU)
+\t:o FEATURE_VOLUMEID_FAT(FEATURE_VOLUMEID_FAT)
+\t:o FEATURE_SH_IS_HUSH_alt(FEATURE_SH_IS_HUSH_alt)
+\t:o IP(IP)
+\t:o USE_BB_PWD_GRP(USE_BB_PWD_GRP)
+\t:o FEATURE_SUID(FEATURE_SUID)
+\t:o DUMPKMAP(DUMPKMAP)
+\t:o MAN(MAN)
+\t:o FEATURE_TRACEROUTE_VERBOSE(FEATURE_TRACEROUTE_VERBOSE)
+\t:o PIVOT_ROOT(PIVOT_ROOT)
+\t:o FEATURE_NAMEIF_EXTENDED(FEATURE_NAMEIF_EXTENDED)
+\t:o FEATURE_VOLUMEID_HFS(FEATURE_VOLUMEID_HFS)
+\t:o RPM2CPIO(RPM2CPIO)
+\t:o FEATURE_VI_8BIT(FEATURE_VI_8BIT)
+\t:o MONOTONIC_SYSCALL(MONOTONIC_SYSCALL)
+\t:o FEATURE_MDEV_RENAME(FEATURE_MDEV_RENAME)
+\t:o TFTPD(TFTPD)
+\t:o FEATURE_LS_USERNAME(FEATURE_LS_USERNAME)
+\t:o PING(PING)
+\t:o INOTIFYD(INOTIFYD)
+\t:o FEATURE_IP_TUNNEL(FEATURE_IP_TUNNEL)
+\t:o START_STOP_DAEMON(START_STOP_DAEMON)
+\t:o INCLUDE_SUSv2(INCLUDE_SUSv2)
+\t:o FEATURE_LESS_MARKS(FEATURE_LESS_MARKS)
+\t:o FEATURE_MDEV_LOAD_FIRMWARE(FEATURE_MDEV_LOAD_FIRMWARE)
+\t:o FEATURE_SPLIT_FANCY(FEATURE_SPLIT_FANCY)
+\t:o SELINUX(SELINUX)
+\t:o FEATURE_TOP_DECIMALS(FEATURE_TOP_DECIMALS)
+\t:o FEATURE_VI_YANKMARK(FEATURE_VI_YANKMARK)
+\t:o GZIP(GZIP)
+\t:o FEATURE_FTP_WRITE(FEATURE_FTP_WRITE)
+\t:o LN(LN)
+\t:o MPSTAT(MPSTAT)
+\t:o LS(LS)
+\t:o RESET(RESET)
+\t:o LOGREAD(LOGREAD)
+\t:o PING6(PING6)
+\t:o UNICODE_WIDE_WCHARS(UNICODE_WIDE_WCHARS)
+\t:o FLOCK(FLOCK)
+\t:o LSATTR(LSATTR)
+\t:o FEATURE_CALL_TELINIT(FEATURE_CALL_TELINIT)
+\t:o FEATURE_INDIVIDUAL(FEATURE_INDIVIDUAL)
+\t:o LAST_SYSTEM_ID(LAST_SYSTEM_ID)
+\t:o FEATURE_TFTP_PROGRESS_BAR(FEATURE_TFTP_PROGRESS_BAR)
+\t:o FEATURE_DPKG_DEB_EXTRACT_ONLY(FEATURE_DPKG_DEB_EXTRACT_ONLY)
+\t:o READPROFILE(READPROFILE)
+\t:o UNIQ(UNIQ)
+\t:o MT(MT)
+\t:o ADDUSER(ADDUSER)
+\t:o MV(MV)
+\t:o FEATURE_NOLOGIN(FEATURE_NOLOGIN)
+\t:o WHOAMI(WHOAMI)
+\t:o FEATURE_LESS_REGEXP(FEATURE_LESS_REGEXP)
+\t:o NC(NC)
+\t:o ACPID(ACPID)
+\t:o LESS(LESS)
+\t:o CHATTR(CHATTR)
+\t:o TFTP_DEBUG(TFTP_DEBUG)
+\t:o XARGS(XARGS)
+\t:o FEATURE_WC_LARGE(FEATURE_WC_LARGE)
+\t:o FEATURE_VOLUMEID_LUKS(FEATURE_VOLUMEID_LUKS)
+\t:o BOOTCHARTD(BOOTCHARTD)
+\t:o FEATURE_LOGREAD_REDUCED_LOCKING(FEATURE_LOGREAD_REDUCED_LOCKING)
+\t:o FEATURE_VOLUMEID_UDF(FEATURE_VOLUMEID_UDF)
+\t:o TCPSVD(TCPSVD)
+\t:o FEATURE_TAB_COMPLETION(FEATURE_TAB_COMPLETION)
+\t:o FEATURE_MDEV_RENAME_REGEXP(FEATURE_MDEV_RENAME_REGEXP)
+\t:o FSCK(FSCK)
+\t:o SHA512SUM(SHA512SUM)
+\t:o EXPR(EXPR)
+\t:o OD(OD)
+\t:o DPKG_DEB(DPKG_DEB)
+\t:o FEATURE_HWIB(FEATURE_HWIB)
+\t:o MKTEMP(MKTEMP)
+\t:o WALL(WALL)
+\t:o FEATURE_FIND_PAREN(FEATURE_FIND_PAREN)
+\t:o FEATURE_TAR_AUTODETECT(FEATURE_TAR_AUTODETECT)
+\t:o ADD_SHELL(ADD_SHELL)
+\t:o FEATURE_DATE_ISOFMT(FEATURE_DATE_ISOFMT)
+\t:o FEATURE_IP_LINK(FEATURE_IP_LINK)
+\t:o PRINTENV(PRINTENV)
+\t:o SLEEP(SLEEP)
+\t:o PS(PS)
+\t:o ECHO(ECHO)
+\t:o FEATURE_VOLUMEID_REISERFS(FEATURE_VOLUMEID_REISERFS)
+\t:o SMEMCAP(SMEMCAP)
+\t:o FEATURE_SU_SYSLOG(FEATURE_SU_SYSLOG)
+\t:o FEATURE_SH_EXTRA_QUIET(FEATURE_SH_EXTRA_QUIET)
+\t:o DIRNAME(DIRNAME)
+\t:o INETD(INETD)
+\t:o READAHEAD(READAHEAD)
+\t:o NTPD(NTPD)
+\t:o FEATURE_MD5_SHA1_SUM_CHECK(FEATURE_MD5_SHA1_SUM_CHECK)
+\t:o LSUSB(LSUSB)
+\t:o FEATURE_LAST_FANCY(FEATURE_LAST_FANCY)
+\t:o FEATURE_EDITING_VI(FEATURE_EDITING_VI)
+\t:o SUM(SUM)
+\t:o FLASH_ERASEALL(FLASH_ERASEALL)
+\t:o FEATURE_BUFFERS_USE_MALLOC(FEATURE_BUFFERS_USE_MALLOC)
+\t:o IOCTL_HEX2STR_ERROR(IOCTL_HEX2STR_ERROR)
+\t:o DEFAULT_SETFONT_DIR(DEFAULT_SETFONT_DIR)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_TIME(FEATURE_INETD_SUPPORT_BUILTIN_TIME)
+\t:o MAKEMIME(MAKEMIME)
+\t:o RM(RM)
+\t:o FEATURE_TOP_CPU_USAGE_PERCENTAGE(FEATURE_TOP_CPU_USAGE_PERCENTAGE)
+\t:o FEATURE_VOLUMEID_LINUXSWAP(FEATURE_VOLUMEID_LINUXSWAP)
+\t:o FEATURE_MODUTILS_SYMBOLS(FEATURE_MODUTILS_SYMBOLS)
+\t:o HUSH_BASH_COMPAT(HUSH_BASH_COMPAT)
+\t:o FEATURE_MIME_CHARSET(FEATURE_MIME_CHARSET)
+\t:o PSCAN(PSCAN)
+\t:o RX(RX)
+\t:o SETKEYCODES(SETKEYCODES)
+\t:o FEATURE_BASH_IS_ASH(FEATURE_BASH_IS_ASH)
+\t:o CPIO(CPIO)
+\t:o FEATURE_ALLOW_EXEC(FEATURE_ALLOW_EXEC)
+\t:o FEATURE_CP_LONG_OPTIONS(FEATURE_CP_LONG_OPTIONS)
+\t:o FEATURE_IFUPDOWN_IFCONFIG_BUILTIN(FEATURE_IFUPDOWN_IFCONFIG_BUILTIN)
+\t:o SH_MATH_SUPPORT_64(SH_MATH_SUPPORT_64)
+\t:o FEATURE_VOLUMEID_CRAMFS(FEATURE_VOLUMEID_CRAMFS)
+\t:o FTPPUT(FTPPUT)
+\t:o FEATURE_VI_READONLY(FEATURE_VI_READONLY)
+\t:o FEATURE_TUNCTL_UG(FEATURE_TUNCTL_UG)
+\t:o MKFS_EXT2(MKFS_EXT2)
+\t:o ASH_OPTIMIZE_FOR_SIZE(ASH_OPTIMIZE_FOR_SIZE)
+\t:o SU(SU)
+\t:o SV(SV)
+\t:o IFCONFIG(IFCONFIG)
+\t:o FEATURE_GZIP_LONG_OPTIONS(FEATURE_GZIP_LONG_OPTIONS)
+\t:o FEATURE_ADDUSER_TO_GROUP(FEATURE_ADDUSER_TO_GROUP)
+\t:o PRINTF(PRINTF)
+\t:o SWAPONOFF(SWAPONOFF)
+\t:o UPTIME(UPTIME)
+\t:o FEATURE_INSMOD_LOADINKMEM(FEATURE_INSMOD_LOADINKMEM)
+\t:o FEATURE_RUNCON_LONG_OPTIONS(FEATURE_RUNCON_LONG_OPTIONS)
+\t:o FEATURE_DC_LIBM(FEATURE_DC_LIBM)
+\t:o TR(TR)
+\t:o FEATURE_LOADFONT_RAW(FEATURE_LOADFONT_RAW)
+\t:o FEATURE_SORT_BIG(FEATURE_SORT_BIG)
+\t:o FEATURE_EDITING_MAX_LEN(FEATURE_EDITING_MAX_LEN)
+\t:o FEATURE_TRACEROUTE_USE_ICMP(FEATURE_TRACEROUTE_USE_ICMP)
+\t:o FEATURE_HDPARM_HDIO_UNREGISTER_HWIF(FEATURE_HDPARM_HDIO_UNREGISTER_HWIF)
+\t:o FEATURE_BUFFERS_GO_IN_BSS_alt(FEATURE_BUFFERS_GO_IN_BSS_alt)
+\t:o VOLUMEID(VOLUMEID)
+\t:o SETLOGCONS(SETLOGCONS)
+\t:o FEATURE_LS_FOLLOWLINKS(FEATURE_LS_FOLLOWLINKS)
+\t:o FEATURE_HTTPD_CONFIG_WITH_SCRIPT_INTERPR(FEATURE_HTTPD_CONFIG_WITH_SCRIPT_INTERPR)
+\t:o DEFAULT_MODULES_DIR(DEFAULT_MODULES_DIR)
+\t:o NANDWRITE(NANDWRITE)
+\t:o FEATURE_BOOTCHARTD_CONFIG_FILE(FEATURE_BOOTCHARTD_CONFIG_FILE)
+\t:o FEATURE_HTTPD_AUTH_MD5(FEATURE_HTTPD_AUTH_MD5)
+\t:o FEATURE_IPCALC_FANCY(FEATURE_IPCALC_FANCY)
+\t:o LOADFONT(LOADFONT)
+\t:o FEATURE_TELNETD_STANDALONE(FEATURE_TELNETD_STANDALONE)
+\t:o FEATURE_DATE_COMPAT(FEATURE_DATE_COMPAT)
+\t:o FEATURE_CHAT_SEND_ESCAPES(FEATURE_CHAT_SEND_ESCAPES)
+\t:o PASSWD(PASSWD)
+\t:o FEATURE_SU_CHECKS_SHELLS(FEATURE_SU_CHECKS_SHELLS)
+\t:o IFUPDOWN(IFUPDOWN)
+\t:o NMETER(NMETER)
+\t:o MATCHPATHCON(MATCHPATHCON)
+\t:o VI(VI)
+\t:o SESTATUS(SESTATUS)
+\t:o SETFONT(SETFONT)
+\t:o LAST(LAST)
+\t:o ARPING(ARPING)
+\t:o SYNC(SYNC)
+\t:o FEATURE_TELNET_TTYPE(FEATURE_TELNET_TTYPE)
+\t:o FEATURE_TFTP_BLOCKSIZE(FEATURE_TFTP_BLOCKSIZE)
+\t:o RESTORECON(RESTORECON)
+\t:o INSTALL_APPLET_DONT(INSTALL_APPLET_DONT)
+\t:o WC(WC)
+\t:o FEATURE_MOUNT_FLAGS(FEATURE_MOUNT_FLAGS)
+\t:o SHA256SUM(SHA256SUM)
+\t:o FEATURE_TELNETD_INETD_WAIT(FEATURE_TELNETD_INETD_WAIT)
+\t:o FEATURE_ADDGROUP_LONG_OPTIONS(FEATURE_ADDGROUP_LONG_OPTIONS)
+\t:o FEATURE_DIFF_LONG_OPTIONS(FEATURE_DIFF_LONG_OPTIONS)
+\t:o FEATURE_PS_WIDE(FEATURE_PS_WIDE)
+\t:o FEATURE_START_STOP_DAEMON_FANCY(FEATURE_START_STOP_DAEMON_FANCY)
+\t:o FEATURE_LS_RECURSIVE(FEATURE_LS_RECURSIVE)
+\t:o FEATURE_GREP_FGREP_ALIAS(FEATURE_GREP_FGREP_ALIAS)
+\t:o TIME(TIME)
+\t:o FEATURE_IP_SHORT_FORMS(FEATURE_IP_SHORT_FORMS)
+\t:o CRYPTPW(CRYPTPW)
+\t:o FEATURE_MOUNT_HELPERS(FEATURE_MOUNT_HELPERS)
+\t:o BUNZIP2(BUNZIP2)
+\t:o HUSH_CASE(HUSH_CASE)
+\t:o SYSLOGD(SYSLOGD)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_ECHO(FEATURE_INETD_SUPPORT_BUILTIN_ECHO)
+\t:o GREP(GREP)
+\t:o SOFTLIMIT(SOFTLIMIT)
+\t:o FEATURE_2_4_MODULES(FEATURE_2_4_MODULES)
+\t:o FALSE(FALSE)
+\t:o FEATURE_VI_ASK_TERMINAL(FEATURE_VI_ASK_TERMINAL)
+\t:o FEATURE_IFUPDOWN_EXTERNAL_DHCP(FEATURE_IFUPDOWN_EXTERNAL_DHCP)
+\t:o FEATURE_SUID_CONFIG(FEATURE_SUID_CONFIG)
+\t:o FEATURE_WTMP(FEATURE_WTMP)
+\t:o XZ(XZ)
+\t:o CKSUM(CKSUM)
+\t:o FEATURE_SH_NOFORK(FEATURE_SH_NOFORK)
+\t:o FEATURE_TAR_OLDSUN_COMPATIBILITY(FEATURE_TAR_OLDSUN_COMPATIBILITY)
+\t:o FEATURE_CHCON_LONG_OPTIONS(FEATURE_CHCON_LONG_OPTIONS)
+\t:o LOGIN(LOGIN)
+\t:o IPCRM(IPCRM)
+\t:o FLASH_UNLOCK(FLASH_UNLOCK)
+\t:o FEATURE_SGI_LABEL(FEATURE_SGI_LABEL)
+\t:o FEATURE_FANCY_HEAD(FEATURE_FANCY_HEAD)
+\t:o FEATURE_MODPROBE_SMALL_CHECK_ALREADY_LOADED(FEATURE_MODPROBE_SMALL_CHECK_ALREADY_LOADED)
+\t:o SV_DEFAULT_SERVICE_DIR(SV_DEFAULT_SERVICE_DIR)
+\t:o FEATURE_EDITING_SAVEHISTORY(FEATURE_EDITING_SAVEHISTORY)
+\t:o VCONFIG(VCONFIG)
+\t:o SCRIPTREPLAY(SCRIPTREPLAY)
+\t:o FEATURE_CLEAN_UP(FEATURE_CLEAN_UP)
+\t:o FEATURE_INSMOD_TRY_MMAP(FEATURE_INSMOD_TRY_MMAP)
+\t:o FEATURE_BASH_IS_HUSH(FEATURE_BASH_IS_HUSH)
+\t:o FEATURE_INITRD(FEATURE_INITRD)
+\t:o FEATURE_ENV_LONG_OPTIONS(FEATURE_ENV_LONG_OPTIONS)
+\t:o FEATURE_HEXDUMP_REVERSE(FEATURE_HEXDUMP_REVERSE)
+\t:o FEATURE_FIND_LINKS(FEATURE_FIND_LINKS)
+\t:o CHAT(CHAT)
+\t:o LENGTH(LENGTH)
+\t:o FEATURE_MKSWAP_UUID(FEATURE_MKSWAP_UUID)
+\t:o FEATURE_IFCONFIG_BROADCAST_PLUS(FEATURE_IFCONFIG_BROADCAST_PLUS)
+\t:o EFENCE(EFENCE)
+\t:o FEATURE_HWCLOCK_LONG_OPTIONS(FEATURE_HWCLOCK_LONG_OPTIONS)
+\t:o FEATURE_MODPROBE_BLACKLIST(FEATURE_MODPROBE_BLACKLIST)
+\t:o FEATURE_CHAT_SWALLOW_OPTS(FEATURE_CHAT_SWALLOW_OPTS)
+\t:o FEATURE_SH_IS_HUSH(FEATURE_SH_IS_HUSH)
+\t:o MSH(MSH)
+\t:o FEATURE_FIND_USER(FEATURE_FIND_USER)
+\t:o FEATURE_UDHCPD_WRITE_LEASES_EARLY(FEATURE_UDHCPD_WRITE_LEASES_EARLY)
+\t:o FEATURE_CROND_CALL_SENDMAIL(FEATURE_CROND_CALL_SENDMAIL)
+\t:o FEATURE_BRCTL_SHOW(FEATURE_BRCTL_SHOW)
+\t:o FEATURE_AIX_LABEL(FEATURE_AIX_LABEL)
+\t:o KBD_MODE(KBD_MODE)
+\t:o FEATURE_VOLUMEID_SYSV(FEATURE_VOLUMEID_SYSV)
+\t:o MORE(MORE)
+\t:o TAC(TAC)
+\t:o UNXZ(UNXZ)
+\t:o KILL(KILL)
+\t:o CATV(CATV)
+\t:o FEATURE_CHAT_IMPLICIT_CR(FEATURE_CHAT_IMPLICIT_CR)
+\t:o INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt(INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_DISCARD(FEATURE_INETD_SUPPORT_BUILTIN_DISCARD)
+\t:o FEATURE_CPIO_P(FEATURE_CPIO_P)
+\t:o TAR(TAR)
+\t:o FEATURE_CPIO_O(FEATURE_CPIO_O)
+\t:o ASH_CMDCMD(ASH_CMDCMD)
+\t:o DEBUG_PESSIMIZE(DEBUG_PESSIMIZE)
+\t:o HUSH_JOB(HUSH_JOB)
+\t:o RTCWAKE(RTCWAKE)
+\t:o UNICODE_NEUTRAL_TABLE(UNICODE_NEUTRAL_TABLE)
+\t:o FEATURE_LOADFONT_PSF2(FEATURE_LOADFONT_PSF2)
+\t:o FEATURE_FIND_MAXDEPTH(FEATURE_FIND_MAXDEPTH)
+\t:o FREERAMDISK(FREERAMDISK)
+\t:o FEATURE_TEE_USE_BLOCK_IO(FEATURE_TEE_USE_BLOCK_IO)
+\t:o MKSWAP(MKSWAP)
+\t:o FEATURE_PS_ADDITIONAL_COLUMNS(FEATURE_PS_ADDITIONAL_COLUMNS)
+\t:o HOSTID(HOSTID)
+\t:o FEATURE_TAR_OLDGNU_COMPATIBILITY(FEATURE_TAR_OLDGNU_COMPATIBILITY)
+\t:o RDATE(RDATE)
+\t:o RUNCON(RUNCON)
+\t:o CHPASSWD(CHPASSWD)
+\t:o LSMOD(LSMOD)
+\t:o CAL(CAL)
+\t:o MODPROBE(MODPROBE)
+\t:o IPROUTE(IPROUTE)
+\t:o LAST_SUPPORTED_WCHAR(LAST_SUPPORTED_WCHAR)
+\t:o FEATURE_EXTRA_QUIET(FEATURE_EXTRA_QUIET)
+\t:o LZOP_COMPR_HIGH(LZOP_COMPR_HIGH)
+\t:o PREFIX(PREFIX)
+\t:o UNICODE_USING_LOCALE(UNICODE_USING_LOCALE)
+\t:o CAT(CAT)
+\t:o INSTALL_SH_APPLET_HARDLINK(INSTALL_SH_APPLET_HARDLINK)
+\t:o FEATURE_IFCONFIG_HW(FEATURE_IFCONFIG_HW)
+\t:o FEATURE_UTMP(FEATURE_UTMP)
+\t:o HAVE_DOT_CONFIG(HAVE_DOT_CONFIG)
+\t:o FEATURE_ROTATE_LOGFILE(FEATURE_ROTATE_LOGFILE)
+\t:o FEATURE_FIND_PATH(FEATURE_FIND_PATH)
+\t:o FEATURE_RUNSVDIR_LOG(FEATURE_RUNSVDIR_LOG)
+\t:o FEATURE_DIFF_DIR(FEATURE_DIFF_DIR)
+\t:o FEATURE_SHADOWPASSWDS(FEATURE_SHADOWPASSWDS)
+\t:o LOGIN_SCRIPTS(LOGIN_SCRIPTS)
+\t:o SLATTACH(SLATTACH)
+\t:o FEATURE_AR_CREATE(FEATURE_AR_CREATE)
+\t:o FEATURE_DD_SIGNAL_HANDLING(FEATURE_DD_SIGNAL_HANDLING)
+\t:o FEATURE_SYSLOG(FEATURE_SYSLOG)
+\t:o TOUCH(TOUCH)
+\t:o FSYNC(FSYNC)
+\t:o FEATURE_MOUNT_LABEL(FEATURE_MOUNT_LABEL)
+\t:o FEATURE_SUID_CONFIG_QUIET(FEATURE_SUID_CONFIG_QUIET)
+\t:o ENVUIDGID(ENVUIDGID)
+\t:o FEATURE_VI_WIN_RESIZE(FEATURE_VI_WIN_RESIZE)
+\t:o ASH_RANDOM_SUPPORT(ASH_RANDOM_SUPPORT)
+\t:o DOS2UNIX(DOS2UNIX)
+\t:o IPCS(IPCS)
+\t:o TEE(TEE)
+\t:o FEATURE_HTTPD_USE_SENDFILE(FEATURE_HTTPD_USE_SENDFILE)
+\t:o RUNSVDIR(RUNSVDIR)
+\t:o FEATURE_USE_TERMIOS(FEATURE_USE_TERMIOS)
+\t:o FEATURE_LESS_WINCH(FEATURE_LESS_WINCH)
+\t:o CHPST(CHPST)
+\t:o CROSS_COMPILER_PREFIX(CROSS_COMPILER_PREFIX)
+\t:o FEATURE_EDITING(FEATURE_EDITING)
+\t:o HUSH(HUSH)
+\t:o SVLOGD(SVLOGD)
+\t:o IFENSLAVE(IFENSLAVE)
+\t:o ASH_BUILTIN_ECHO(ASH_BUILTIN_ECHO)
+\t:o SETSEBOOL(SETSEBOOL)
+\t:o FEATURE_MAKEDEVS_TABLE(FEATURE_MAKEDEVS_TABLE)
+\t:o FEATURE_HTTPD_ERROR_PAGES(FEATURE_HTTPD_ERROR_PAGES)
+\t:o FEATURE_VOLUMEID_LINUXRAID(FEATURE_VOLUMEID_LINUXRAID)
+\t:o PIDOF(PIDOF)
+\t:o FEATURE_KILL_DELAY(FEATURE_KILL_DELAY)
+\t:o NSLOOKUP(NSLOOKUP)
+\t:o FEATURE_XARGS_SUPPORT_QUOTES(FEATURE_XARGS_SUPPORT_QUOTES)
+\t:o FEATURE_IPCALC_LONG_OPTIONS(FEATURE_IPCALC_LONG_OPTIONS)
+\t:o FEATURE_PIDOF_OMIT(FEATURE_PIDOF_OMIT)
+\t:o GUNZIP(GUNZIP)
+\t:o FEATURE_TR_CLASSES(FEATURE_TR_CLASSES)
+\t:o FOLD(FOLD)
+\t:o UNICODE_PRESERVE_BROKEN(UNICODE_PRESERVE_BROKEN)
+\t:o ASH_BASH_COMPAT(ASH_BASH_COMPAT)
+\t:o DIFF(DIFF)
+\t:o FEATURE_FDISK_WRITABLE(FEATURE_FDISK_WRITABLE)
+\t:o MKNOD(MKNOD)
+\t:o SHOWKEY(SHOWKEY)
+\t:o LOCALE_SUPPORT(LOCALE_SUPPORT)
+\t:o FEATURE_SEAMLESS_BZ2(FEATURE_SEAMLESS_BZ2)
+\t:o KLOGD(KLOGD)
+\t:o BEEP(BEEP)
+\t:o GETTY(GETTY)
+\t:o FSCK_MINIX(FSCK_MINIX)
+\t:o FEATURE_GREP_CONTEXT(FEATURE_GREP_CONTEXT)
+\t:o NAMEIF(NAMEIF)
+\t:o FEATURE_HTTPD_SETUID(FEATURE_HTTPD_SETUID)
+\t:o FEATURE_LZMA_FAST(FEATURE_LZMA_FAST)
+\t:o FEATURE_MAKEDEVS_TABLE_alt(FEATURE_MAKEDEVS_TABLE_alt)
+\t:o EXTRA_CFLAGS(EXTRA_CFLAGS)
+\t:o FIRST_SYSTEM_ID(FIRST_SYSTEM_ID)
+\t:o FEATURE_VOLUMEID_OCFS2(FEATURE_VOLUMEID_OCFS2)
+\t:o FEATURE_BASH_IS_HUSH_alt(FEATURE_BASH_IS_HUSH_alt)
+\t:o PLATFORM_LINUX(PLATFORM_LINUX)
+\t:o UNIX2DOS(UNIX2DOS)
+\t:o FEATURE_XARGS_SUPPORT_CONFIRMATION(FEATURE_XARGS_SUPPORT_CONFIRMATION)
+\t:o FEATURE_REFORMIME_COMPAT(FEATURE_REFORMIME_COMPAT)
+\t:o FEATURE_INIT_SYSLOG(FEATURE_INIT_SYSLOG)
+\t:o FEATURE_AR_LONG_FILENAMES(FEATURE_AR_LONG_FILENAMES)
+\t:o EXPR_MATH_SUPPORT_64(EXPR_MATH_SUPPORT_64)
+\t:o FEATURE_INSTALLER(FEATURE_INSTALLER)
+\t:o FEATURE_FIND_MMIN(FEATURE_FIND_MMIN)
+\t:o FEATURE_FIND_PRINT0(FEATURE_FIND_PRINT0)
+\t:o DESKTOP(DESKTOP)
+\t:o DMALLOC(DMALLOC)
+\t:o READLINK(READLINK)
+\t:o TAIL(TAIL)
+\t:o RFKILL(RFKILL)
+\t:o HUSH_TICK(HUSH_TICK)
+\t:o PAM(PAM)
+\t:o ASH_BUILTIN_PRINTF(ASH_BUILTIN_PRINTF)
+\t:o REV(REV)
+\t:o FEATURE_FIND_PERM(FEATURE_FIND_PERM)
+\t:o FEATURE_USERNAME_COMPLETION(FEATURE_USERNAME_COMPLETION)
+\t:o IONICE(IONICE)
+\t:o UNICODE_COMBINING_WCHARS(UNICODE_COMBINING_WCHARS)
+\t:o FEATURE_GREP_EGREP_ALIAS(FEATURE_GREP_EGREP_ALIAS)
+\t:o FEATURE_DD_IBS_OBS(FEATURE_DD_IBS_OBS)
+\t:o FEATURE_IP_ADDRESS(FEATURE_IP_ADDRESS)
+\t:o SELINUXENABLED(SELINUXENABLED)
+\t:o FEATURE_LAST_SMALL(FEATURE_LAST_SMALL)
+\t:o FEATURE_FIND_DELETE(FEATURE_FIND_DELETE)
+\t:o CROND(CROND)
+\t:o HTTPD(HTTPD)
+\t:o PATCH(PATCH)
+\t:o FEATURE_FIND_CONTEXT(FEATURE_FIND_CONTEXT)
+\t:o FEATURE_FTPGETPUT_LONG_OPTIONS(FEATURE_FTPGETPUT_LONG_OPTIONS)
+\t:o UNAME(UNAME)
+\t:o FEATURE_PREFER_IPV4_ADDRESS(FEATURE_PREFER_IPV4_ADDRESS)
+\t:o TEST(TEST)
+\t:o FEATURE_BASH_IS_NONE(FEATURE_BASH_IS_NONE)
+\t:o IPLINK(IPLINK)
+\t:o STRINGS(STRINGS)
+\t:o FEATURE_UNIX_LOCAL(FEATURE_UNIX_LOCAL)
+\t:o ENV(ENV)
+\t:o FEATURE_FIND_DEPTH(FEATURE_FIND_DEPTH)
+\t:o FEATURE_ACPID_COMPAT(FEATURE_ACPID_COMPAT)
+\t:o FEATURE_BEEP_LENGTH_MS(FEATURE_BEEP_LENGTH_MS)
+\t:o IFPLUGD(IFPLUGD)
+\t:o HUSH_EXPORT_N(HUSH_EXPORT_N)
+\t:o FEATURE_VERBOSE_USAGE(FEATURE_VERBOSE_USAGE)
+\t:o FEATURE_VERBOSE_CP_MESSAGE(FEATURE_VERBOSE_CP_MESSAGE)
+\t:o UUENCODE(UUENCODE)
+\t:o FEATURE_HTTPD_BASIC_AUTH(FEATURE_HTTPD_BASIC_AUTH)
+\t:o FEATURE_INSMOD_KSYMOOPS_SYMBOLS(FEATURE_INSMOD_KSYMOOPS_SYMBOLS)
+\t:o FEATURE_DATE_NANO(FEATURE_DATE_NANO)
+\t:o FEATURE_IP_ROUTE(FEATURE_IP_ROUTE)
+\t:o RMDIR(RMDIR)
+\t:o FEATURE_NTPD_SERVER(FEATURE_NTPD_SERVER)
+\t:o FEATURE_IP_RARE_PROTOCOLS(FEATURE_IP_RARE_PROTOCOLS)
+\t:o MAKEDEVS(MAKEDEVS)
+\t:o FEATURE_MODUTILS_ALIAS(FEATURE_MODUTILS_ALIAS)
+\t:o FEATURE_SETFILES_CHECK_OPTION(FEATURE_SETFILES_CHECK_OPTION)
+\t:o USE_BB_SHADOW(USE_BB_SHADOW)
+\t:o FEATURE_IFCONFIG_SLIP(FEATURE_IFCONFIG_SLIP)
+\t:o FEATURE_INSMOD_LOAD_MAP_FULL(FEATURE_INSMOD_LOAD_MAP_FULL)
+\t:o FEATURE_PASSWD_WEAK_CHECK(FEATURE_PASSWD_WEAK_CHECK)
+\t:o IFUPDOWN_UDHCPC_CMD_OPTIONS(IFUPDOWN_UDHCPC_CMD_OPTIONS)
+\t:o CHCON(CHCON)
+\t:o FEATURE_MODPROBE_SMALL_OPTIONS_ON_CMDLINE(FEATURE_MODPROBE_SMALL_OPTIONS_ON_CMDLINE)
+\t:o FUSER(FUSER)
+\t:o FEATURE_SH_IS_ASH(FEATURE_SH_IS_ASH)
+\t:o NO_DEBUG_LIB(NO_DEBUG_LIB)
+\t:o FEATURE_HUMAN_READABLE(FEATURE_HUMAN_READABLE)
+\t:o WHICH(WHICH)
+\t:o FEATURE_FAST_TOP(FEATURE_FAST_TOP)
+\t:o FEATURE_SEAMLESS_XZ(FEATURE_SEAMLESS_XZ)
+\t:o CMP(CMP)
+\t:o FEATURE_UDHCP_RFC3397(FEATURE_UDHCP_RFC3397)
+\t:o WATCHDOG(WATCHDOG)
+\t:o FEATURE_VOLUMEID_NTFS(FEATURE_VOLUMEID_NTFS)
+\t:o INIT(INIT)
+\t:o INSTALL_APPLET_DONT_alt(INSTALL_APPLET_DONT_alt)
+\t:o KILLALL(KILLALL)
+\t:o TOP(TOP)
+\t:o FEATURE_IFUPDOWN_IPV6(FEATURE_IFUPDOWN_IPV6)
+\t:o HWCLOCK(HWCLOCK)
+\t:o GETSEBOOL(GETSEBOOL)
+\t:o FEATURE_IFUPDOWN_IPV4(FEATURE_IFUPDOWN_IPV4)
+\t:o TIMEOUT(TIMEOUT)
+\t:o FEATURE_DMESG_PRETTY(FEATURE_DMESG_PRETTY)
+\t:o FEATURE_POPMAILDIR_DELIVERY(FEATURE_POPMAILDIR_DELIVERY)
+\t:o FEATURE_CHAT_CLR_ABORT(FEATURE_CHAT_CLR_ABORT)
+\t:o EXTRA_COMPAT(EXTRA_COMPAT)
+\t:o FEATURE_HWCLOCK_ADJTIME_FHS(FEATURE_HWCLOCK_ADJTIME_FHS)
+\t:o FEATURE_UMOUNT_ALL(FEATURE_UMOUNT_ALL)
+\t:o INSMOD(INSMOD)
+\t:o FEATURE_MV_LONG_OPTIONS(FEATURE_MV_LONG_OPTIONS)
+\t:o FEATURE_DD_THIRD_STATUS_LINE(FEATURE_DD_THIRD_STATUS_LINE)
+\t:o LOSETUP(LOSETUP)
+\t:o FEATURE_TFTP_PUT(FEATURE_TFTP_PUT)
+\t:o IOSTAT(IOSTAT)
+\t:o FEATURE_TOP_CPU_GLOBAL_PERCENTS(FEATURE_TOP_CPU_GLOBAL_PERCENTS)
+\t:o FEATURE_START_STOP_DAEMON_LONG_OPTIONS(FEATURE_START_STOP_DAEMON_LONG_OPTIONS)
+\t:o PIE(PIE)
+\t:o DHCPD_LEASES_FILE(DHCPD_LEASES_FILE)
+\t:o FEATURE_KLOGD_KLOGCTL(FEATURE_KLOGD_KLOGCTL)
+\t:o CHRT(CHRT)
+\t:o FEATURE_VOLUMEID_XFS(FEATURE_VOLUMEID_XFS)
+\t:o FEATURE_HDPARM_HDIO_TRISTATE_HWIF(FEATURE_HDPARM_HDIO_TRISTATE_HWIF)
+\t:o TELNETD(TELNETD)
+\t:o MODINFO(MODINFO)
+\t:o FEATURE_MAKEDEVS_LEAF(FEATURE_MAKEDEVS_LEAF)
+\t:o FEATURE_IPC_SYSLOG_BUFFER_SIZE(FEATURE_IPC_SYSLOG_BUFFER_SIZE)
+\t:o UBIDETACH(UBIDETACH)
+\t:o FEATURE_SECURETTY(FEATURE_SECURETTY)
+\t:o CHGRP(CHGRP)
+\t:o DEVFSD_VERBOSE(DEVFSD_VERBOSE)
+\t:o FEATURE_NETSTAT_PRG(FEATURE_NETSTAT_PRG)
+\t:o FIND(FIND)
+\t:o LSPCI(LSPCI)
+\t:o FEATURE_HDPARM_HDIO_GETSET_DMA(FEATURE_HDPARM_HDIO_GETSET_DMA)
+\t:o TRUE(TRUE)
+\t:o FEATURE_LESS_MAXLINES(FEATURE_LESS_MAXLINES)
+\t:o UMOUNT(UMOUNT)
+\t:o REALPATH(REALPATH)
+\t:o KILLALL5(KILLALL5)
+\t:o SCRIPT(SCRIPT)
+\t:o SORT(SORT)
+\t:o BBCONFIG(BBCONFIG)
+\t:o IPRULE(IPRULE)
+\t:o VERBOSE_RESOLUTION_ERRORS(VERBOSE_RESOLUTION_ERRORS)
+\t:o HEAD(HEAD)
+\t:o VOLNAME(VOLNAME)
+\t:o MESG(MESG)
+\t:o MD5_SIZE_VS_SPEED(MD5_SIZE_VS_SPEED)
+\t:o FEATURE_INIT_SCTTY(FEATURE_INIT_SCTTY)
+\t:o RPM(RPM)
+\t:o TTY(TTY)
+\t:o BLKID(BLKID)
+\t:o FEATURE_VI_OPTIMIZE_CURSOR(FEATURE_VI_OPTIMIZE_CURSOR)
+\t:o FEATURE_BUFFERS_GO_IN_BSS(FEATURE_BUFFERS_GO_IN_BSS)
+\t:o OPENVT(OPENVT)
+\t:o FEATURE_EDITING_HISTORY(FEATURE_EDITING_HISTORY)
+\t:o HUSH_INTERACTIVE(HUSH_INTERACTIVE)
+\t:o FEATURE_SHARED_BUSYBOX(FEATURE_SHARED_BUSYBOX)
+\t:o DEBUG(DEBUG)
+\t:o FEATURE_TEST_64(FEATURE_TEST_64)
+\t:o FEATURE_INIT_COREDUMPS(FEATURE_INIT_COREDUMPS)
+\t:o FEATURE_TAR_SELINUX(FEATURE_TAR_SELINUX)
+\t:o FEATURE_INETD_RPC(FEATURE_INETD_RPC)
+\t:o NETSTAT(NETSTAT)
+\t:o DEVFSD_FG_NP(DEVFSD_FG_NP)
+\t:o FEATURE_VI_COLON(FEATURE_VI_COLON)
+\t:o CHVT(CHVT)
+\t:o CLEAR(CLEAR)
+\t:o FBSET(FBSET)
+\t:o FEATURE_RUN_PARTS_FANCY(FEATURE_RUN_PARTS_FANCY)
+\t:o INSTALL(INSTALL)
+\t:o FEATURE_SWAPON_PRI(FEATURE_SWAPON_PRI)
+\t:o FEATURE_IFUPDOWN_IP_BUILTIN(FEATURE_IFUPDOWN_IP_BUILTIN)
+\t:o FEATURE_TAR_UNAME_GNAME(FEATURE_TAR_UNAME_GNAME)
+\t:o FEATURE_VI_MAX_LEN(FEATURE_VI_MAX_LEN)
+\t:o SETENFORCE(SETENFORCE)
+\t:o FEATURE_CHAT_VAR_ABORT_LEN(FEATURE_CHAT_VAR_ABORT_LEN)
+\t:o SWITCH_ROOT(SWITCH_ROOT)
+\t:o FEATURE_IFCONFIG_MEMSTART_IOADDR_IRQ(FEATURE_IFCONFIG_MEMSTART_IOADDR_IRQ)
+\t:o FEATURE_USE_INITTAB(FEATURE_USE_INITTAB)
+\t:o FEATURE_VOLUMEID_ISO9660(FEATURE_VOLUMEID_ISO9660)
+\t:o NANDDUMP(NANDDUMP)
+\t:o MOUNTPOINT(MOUNTPOINT)
+\t:o INSTALL_SH_APPLET_SYMLINK(INSTALL_SH_APPLET_SYMLINK)
+\t:o LFS(LFS)
+\t:o FDFLUSH(FDFLUSH)
+\t:o FEATURE_SH_IS_NONE(FEATURE_SH_IS_NONE)
+\t:o SULOGIN(SULOGIN)
+\t:o ASH_EXPAND_PRMT(ASH_EXPAND_PRMT)
+\t:o CUT(CUT)
+\t:o FEATURE_RMDIR_LONG_OPTIONS(FEATURE_RMDIR_LONG_OPTIONS)
+\t:o FEATURE_TAR_NOPRESERVE_TIME(FEATURE_TAR_NOPRESERVE_TIME)
+\t:o CONSPY(CONSPY)
+\t:o FEATURE_FIND_EXEC(FEATURE_FIND_EXEC)
+\t:o FEATURE_CROND_D(FEATURE_CROND_D)
+\t:o IFUPDOWN_IFSTATE_PATH(IFUPDOWN_IFSTATE_PATH)
+\t:o FEATURE_TR_EQUIV(FEATURE_TR_EQUIV)
+\t:o FEATURE_SETFONT_TEXTUAL_MAP(FEATURE_SETFONT_TEXTUAL_MAP)
+\t:o SUBST_WCHAR(SUBST_WCHAR)
+\t:o MKFS_VFAT(MKFS_VFAT)
+\t:o FEATURE_FIND_XDEV(FEATURE_FIND_XDEV)
+\t:o FEATURE_MOUNT_LOOP_CREATE(FEATURE_MOUNT_LOOP_CREATE)
+\t:o FEATURE_RUN_PARTS_LONG_OPTIONS(FEATURE_RUN_PARTS_LONG_OPTIONS)
+\t:o ZCIP(ZCIP)
+\t:o FEATURE_HTTPD_PROXY(FEATURE_HTTPD_PROXY)
+\t:o FEATURE_BUFFERS_GO_ON_STACK(FEATURE_BUFFERS_GO_ON_STACK)
+\t:o FEATURE_IPV6(FEATURE_IPV6)
+\t:o ARP(ARP)
+\t:o FEATURE_TOP_SMP_CPU(FEATURE_TOP_SMP_CPU)
+\t:o USLEEP(USLEEP)
+\t:o LOADKMAP(LOADKMAP)
+\t:o RDEV(RDEV)
+\t:o FEATURE_MDEV_CONF(FEATURE_MDEV_CONF)
+\t:o FREE(FREE)
+\t:o SPLIT(SPLIT)
+\t:o FEATURE_PIDOF_SINGLE(FEATURE_PIDOF_SINGLE)
+\t:o ASH(ASH)
+\t:o USE_PORTABLE_CODE(USE_PORTABLE_CODE)
+\t:o FEATURE_SYSLOGD_DUP(FEATURE_SYSLOGD_DUP)
+\t:o FEATURE_LESS_FLAGS(FEATURE_LESS_FLAGS)
+\t:o MKFS_MINIX(MKFS_MINIX)
+\t:o FEATURE_VOLUMEID_EXT(FEATURE_VOLUMEID_EXT)
+\t:o VLOCK(VLOCK)
+\t:o DEVMEM(DEVMEM)
+\t:o TELINIT_PATH(TELINIT_PATH)
+\t:o RMMOD(RMMOD)
+\t:o DEVFSD_MODLOAD(DEVFSD_MODLOAD)
+\t:o FEATURE_COMPRESS_BBCONFIG(FEATURE_COMPRESS_BBCONFIG)
+\t:o FEATURE_LS_TIMESTAMPS(FEATURE_LS_TIMESTAMPS)
+\t:o FEATURE_EXPAND_LONG_OPTIONS(FEATURE_EXPAND_LONG_OPTIONS)
+\t:o FEATURE_HTTPD_GZIP(FEATURE_HTTPD_GZIP)
+\t:o MKDIR(MKDIR)
+\t:o FEATURE_IFUPDOWN_MAPPING(FEATURE_IFUPDOWN_MAPPING)
+\t:o FEATURE_FIND_MTIME(FEATURE_FIND_MTIME)
+\t:o FEATURE_IPC_SYSLOG(FEATURE_IPC_SYSLOG)
+\t:o STAT(STAT)
+\t:o FEATURE_AWK_LIBM(FEATURE_AWK_LIBM)
+\t:o ROUTE(ROUTE)
+\t:o GETOPT(GETOPT)
+\t:o CRONTAB(CRONTAB)
+\t:o FTPGET(FTPGET)
+\t:o FEATURE_SETCONSOLE_LONG_OPTIONS(FEATURE_SETCONSOLE_LONG_OPTIONS)
+\t:o FEATURE_HTTPD_CGI(FEATURE_HTTPD_CGI)
+\t:o FDFORMAT(FDFORMAT)
+\t:o FEATURE_FANCY_ECHO(FEATURE_FANCY_ECHO)
+\t:o FEATURE_EDITING_ASK_TERMINAL(FEATURE_EDITING_ASK_TERMINAL)
+\t:o FEATURE_MOUNT_CIFS(FEATURE_MOUNT_CIFS)
+\t:o FEATURE_LESS_DASHCMD(FEATURE_LESS_DASHCMD)
+\t:o RUNSV(RUNSV)
+\t:o DEALLOCVT(DEALLOCVT)
+\t:o UUDECODE(UUDECODE)
+\t:o ASH_BUILTIN_TEST(ASH_BUILTIN_TEST)
+\t:o SETUIDGID(SETUIDGID)
+\t:o BUSYBOX_EXEC_PATH(BUSYBOX_EXEC_PATH)
+\t:o ETHER_WAKE(ETHER_WAKE)
+\t:o ENVDIR(ENVDIR)
+\t:o TTYSIZE(TTYSIZE)
+\t:o BUILD_LIBBUSYBOX(BUILD_LIBBUSYBOX)
+\t:o FEATURE_TELNET_AUTOLOGIN(FEATURE_TELNET_AUTOLOGIN)
+\t:o SETARCH(SETARCH)
+\t:o FEATURE_DEL_USER_FROM_GROUP(FEATURE_DEL_USER_FROM_GROUP)
+\t:o NC_SERVER(NC_SERVER)
+\t:o FEATURE_CHOWN_LONG_OPTIONS(FEATURE_CHOWN_LONG_OPTIONS)
+\t:o YES(YES)
+\t:o POPMAILDIR(POPMAILDIR)
+\t:o FEATURE_SUN_LABEL(FEATURE_SUN_LABEL)
+\t:o DPKG(DPKG)
+\t:o PMAP(PMAP)
+\t:o DELGROUP(DELGROUP)
+\t:o USE_BB_CRYPT(USE_BB_CRYPT)
+\t:o FEATURE_DEVPTS(FEATURE_DEVPTS)
+\t:o FEATURE_VOLUMEID_JFS(FEATURE_VOLUMEID_JFS)
+\t:o REFORMIME(REFORMIME)
+\t:o TRACEROUTE6(TRACEROUTE6)
+\t:o DUMPLEASES(DUMPLEASES)
+\t:o USE_BB_CRYPT_SHA(USE_BB_CRYPT_SHA)
+\t:o AWK(AWK)
+\t:o FEATURE_SEAMLESS_Z(FEATURE_SEAMLESS_Z)
+\t:o FEATURE_RESIZE_PRINT(FEATURE_RESIZE_PRINT)
+\t:o HUSH_HELP(HUSH_HELP)
+\t:o FEATURE_VI_USE_SIGNALS(FEATURE_VI_USE_SIGNALS)
+\t:o HUSH_BRACE_EXPANSION(HUSH_BRACE_EXPANSION)
+\t:o FAKEIDENTD(FAKEIDENTD)
+\t:o FEATURE_MTAB_SUPPORT(FEATURE_MTAB_SUPPORT)
+\t:o FEATURE_PS_TIME(FEATURE_PS_TIME)
+\t:o IPCALC(IPCALC)
+\t:o SH_MATH_SUPPORT(SH_MATH_SUPPORT)
+\t:o ASH_ALIAS(ASH_ALIAS)
+\t:o FEATURE_HAVE_RPC(FEATURE_HAVE_RPC)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_DAYTIME(FEATURE_INETD_SUPPORT_BUILTIN_DAYTIME)
+\t:o UDHCP_DEBUG(UDHCP_DEBUG)
+\t:o DEVFSD(DEVFSD)
+\t:o FEATURE_OSF_LABEL(FEATURE_OSF_LABEL)
+\t:o SHOW_USAGE(SHOW_USAGE)
+\t:o FEATURE_MOUNT_FAKE(FEATURE_MOUNT_FAKE)
+\t:o FEATURE_UDHCPC_ARPING(FEATURE_UDHCPC_ARPING)
+\t:o FEATURE_FTPD_ACCEPT_BROKEN_LIST(FEATURE_FTPD_ACCEPT_BROKEN_LIST)
+\t:o FEATURE_TAR_FROM(FEATURE_TAR_FROM)
+\t:o FEATURE_BEEP_FREQ(FEATURE_BEEP_FREQ)
+\t:o ADDGROUP(ADDGROUP)
+\t:o COMM(COMM)
+\t:o FEATURE_LSMOD_PRETTY_2_6_OUTPUT(FEATURE_LSMOD_PRETTY_2_6_OUTPUT)
+\t:o FEATURE_PS_UNUSUAL_SYSTEMS(FEATURE_PS_UNUSUAL_SYSTEMS)
+\t:o FEATURE_TAR_LONG_OPTIONS(FEATURE_TAR_LONG_OPTIONS)
+\t:o PWD(PWD)
+\t:o IPTUNNEL(IPTUNNEL)
+\t:o FEATURE_NON_POSIX_CP(FEATURE_NON_POSIX_CP)
+\t:o PKILL(PKILL)
+\t:o FEATURE_VI_SETOPTS(FEATURE_VI_SETOPTS)
+\t:o FEATURE_GPT_LABEL(FEATURE_GPT_LABEL)
+\t:o FEATURE_GETOPT_LONG(FEATURE_GETOPT_LONG)
+\t:o CHOWN(CHOWN)
+\t:o FEATURE_EDITING_FANCY_PROMPT(FEATURE_EDITING_FANCY_PROMPT)
+\t:o FBSPLASH(FBSPLASH)
+\t:o FEATURE_INSTALL_LONG_OPTIONS(FEATURE_INSTALL_LONG_OPTIONS)
+\t:o HUSH_LOOPS(HUSH_LOOPS)
+\t:o LPD(LPD)
+\t:o FEATURE_VI_SET(FEATURE_VI_SET)
+\t:o FEATURE_VOLUMEID_BTRFS(FEATURE_VOLUMEID_BTRFS)
+\t:o FLASH_LOCK(FLASH_LOCK)
+\t:o DEFAULT_DEPMOD_FILE(DEFAULT_DEPMOD_FILE)
+\t:o LPQ(LPQ)
+\t:o FEATURE_PREFER_APPLETS(FEATURE_PREFER_APPLETS)
+\t:o LPR(LPR)
+\t:o RESIZE(RESIZE)
+\t:o FEATURE_VOLUMEID_ROMFS(FEATURE_VOLUMEID_ROMFS)
+\t:o WGET(WGET)
+\t:o FEATURE_SEAMLESS_GZ(FEATURE_SEAMLESS_GZ)
+\t:o ADJTIMEX(ADJTIMEX)
+\t:o FEATURE_WGET_LONG_OPTIONS(FEATURE_WGET_LONG_OPTIONS)
+\t:o EJECT(EJECT)
+\t:o BZIP2(BZIP2)
+\t:o ASH_GETOPTS(ASH_GETOPTS)
+\t:o BLOCKDEV(BLOCKDEV)
+\t:o MICROCOM(MICROCOM)
+\t:o FTPD(FTPD)
+\t:o FEATURE_FANCY_SLEEP(FEATURE_FANCY_SLEEP)
+\t:o DEPMOD(DEPMOD)
+\t:o FEATURE_HTTPD_ENCODE_URL_STR(FEATURE_HTTPD_ENCODE_URL_STR)
+\t:o FEATURE_TAR_GNU_EXTENSIONS(FEATURE_TAR_GNU_EXTENSIONS)
+\t:o FEATURE_WGET_STATUSBAR(FEATURE_WGET_STATUSBAR)
+\t:o FEATURE_CHECK_TAINTED_MODULE(FEATURE_CHECK_TAINTED_MODULE)
+\t:o FEATURE_FIND_NOT(FEATURE_FIND_NOT)
+\t:o FEATURE_TRACEROUTE_SOURCE_ROUTE(FEATURE_TRACEROUTE_SOURCE_ROUTE)
+\t:o LONG_OPTS(LONG_OPTS)
+\t:o FEATURE_WGET_AUTHENTICATION(FEATURE_WGET_AUTHENTICATION)
+\t:o NICE(NICE)
+\t:o FEATURE_MKDIR_LONG_OPTIONS(FEATURE_MKDIR_LONG_OPTIONS)
+\t:o FEATURE_LS_SORTFILES(FEATURE_LS_SORTFILES)
+\t:o FEATURE_INETD_SUPPORT_BUILTIN_CHARGEN(FEATURE_INETD_SUPPORT_BUILTIN_CHARGEN)
+\t:o LZMA(LZMA)
+\t:o FEATURE_INSMOD_LOAD_MAP(FEATURE_INSMOD_LOAD_MAP)
+\t:o FEATURE_UNEXPAND_LONG_OPTIONS(FEATURE_UNEXPAND_LONG_OPTIONS)
+\t:o FEATURE_IFCONFIG_STATUS(FEATURE_IFCONFIG_STATUS)
+\t:o FEATURE_TOPMEM(FEATURE_TOPMEM)
+\t:o INSTALL_APPLET_HARDLINKS(INSTALL_APPLET_HARDLINKS)
+\t:o MKFS_REISER(MKFS_REISER)
+\t:o CHMOD(CHMOD)
+\t:o RUN_PARTS(RUN_PARTS)
+\t:o FEATURE_FIND_SIZE(FEATURE_FIND_SIZE)
+\t:o INSTALL_NO_USR(INSTALL_NO_USR)
+\t:o WERROR(WERROR)
+\t:o MOUNT(MOUNT)
+\t:o INSTALL_APPLET_SYMLINKS(INSTALL_APPLET_SYMLINKS)
+\t:o WHO(WHO)
+\t:o FEATURE_MDEV_EXEC(FEATURE_MDEV_EXEC)
+\t:o FEATURE_MOUNT_FSTAB(FEATURE_MOUNT_FSTAB)
+\t:o PIPE_PROGRESS(PIPE_PROGRESS)
+\t:o FEATURE_REMOTE_LOG(FEATURE_REMOTE_LOG)
+\t:o PGREP(PGREP)
+\t:o UNICODE_SUPPORT(UNICODE_SUPPORT)
+\t:o DATE(DATE)
+\t:o FEATURE_ETC_NETWORKS(FEATURE_ETC_NETWORKS)
+\t:o FEATURE_SYSLOGD_READ_BUFFER_SIZE(FEATURE_SYSLOGD_READ_BUFFER_SIZE)
+\t:o FDISK_SUPPORT_LARGE_DISKS(FDISK_SUPPORT_LARGE_DISKS)
+\t:o TASKSET(TASKSET)
+\t:o FEATURE_TASKSET_FANCY(FEATURE_TASKSET_FANCY)
+\t:o LOGGER(LOGGER)
+\t:o FEATURE_HDPARM_HDIO_DRIVE_RESET(FEATURE_HDPARM_HDIO_DRIVE_RESET)
+\t:o FEATURE_COPYBUF_KB(FEATURE_COPYBUF_KB)
+\t:o FEATURE_PRESERVE_HARDLINKS(FEATURE_PRESERVE_HARDLINKS)
+\t:o SHA1SUM(SHA1SUM)
+\t:o DHCPRELAY(DHCPRELAY)
+\t:o LZOP(LZOP)
+\t:o FEATURE_CHECK_NAMES(FEATURE_CHECK_NAMES)
+\t:o RENICE(RENICE)
+\t:o FEATURE_HDPARM_HDIO_SCAN_HWIF(FEATURE_HDPARM_HDIO_SCAN_HWIF)
+\t:o FEATURE_PIDFILE(FEATURE_PIDFILE)
+\t:o FEATURE_IFUPDOWN_IP(FEATURE_IFUPDOWN_IP)
+\t:o DMESG(DMESG)
+\t:o ASH_JOB_CONTROL(ASH_JOB_CONTROL)
+\t:o UDHCPD(UDHCPD)
+\t:o FEATURE_MOUNT_LOOP(FEATURE_MOUNT_LOOP)
+\t:o UDHCPC(UDHCPC)
+\t:o FEATURE_LESS_BRACKETS(FEATURE_LESS_BRACKETS)
+\t:o FINDFS(FINDFS)
+\t:o FEATURE_FDISK_ADVANCED(FEATURE_FDISK_ADVANCED)
+\t:o POWERTOP(POWERTOP)
+\t:o FEATURE_LS_COLOR(FEATURE_LS_COLOR)
+\t:o FEATURE_TAR_CREATE(FEATURE_TAR_CREATE)
+\t:o FEATURE_BRCTL_FANCY(FEATURE_BRCTL_FANCY)
+\t:o HUSH_RANDOM_SUPPORT(HUSH_RANDOM_SUPPORT)
+\t:o UDHCPC_SLACK_FOR_BUGGY_SERVERS(UDHCPC_SLACK_FOR_BUGGY_SERVERS)
+\t:o FEATURE_CHAT_NOFAIL(FEATURE_CHAT_NOFAIL)
+\t:o UDPSVD(UDPSVD)
+\t:o NOHUP(NOHUP)
+\t:o FEATURE_FANCY_PING(FEATURE_FANCY_PING)
+\t:o FEATURE_DU_DEFAULT_BLOCKSIZE_1K(FEATURE_DU_DEFAULT_BLOCKSIZE_1K)
+\t:o FEATURE_NETSTAT_WIDE(FEATURE_NETSTAT_WIDE)
+\t:o FEATURE_CHECK_UNICODE_IN_ENV(FEATURE_CHECK_UNICODE_IN_ENV)
+</feature_tree>
+    <constraints>
+C1:root
+C2:STATIC  or  ~PIE
+C3:HEXDUMP  or  ~FEATURE_HEXDUMP_REVERSE
+C4:HEXDUMP  or  ~HD
+C5:EXPAND  or  ~FEATURE_EXPAND_LONG_OPTIONS
+C6:HDPARM  or  ~FEATURE_HDPARM_HDIO_TRISTATE_HWIF
+C7:HDPARM  or  ~FEATURE_HDPARM_GET_IDENTITY
+C8:HDPARM  or  ~FEATURE_HDPARM_HDIO_SCAN_HWIF
+C9:HDPARM  or  ~FEATURE_HDPARM_HDIO_GETSET_DMA
+C10:HDPARM  or  ~FEATURE_HDPARM_HDIO_UNREGISTER_HWIF
+C11:HDPARM  or  ~FEATURE_HDPARM_HDIO_DRIVE_RESET
+C12:AR  or  ~FEATURE_AR_LONG_FILENAMES
+C13:AR  or  ~FEATURE_AR_CREATE
+C14:SETFILES  or  ~FEATURE_SETFILES_CHECK_OPTION
+C15:HUSH_FUNCTIONS  or  ~HUSH_LOCAL
+C16:HALT  or  ~FEATURE_CALL_TELINIT
+C17:BRCTL  or  ~FEATURE_BRCTL_FANCY
+C18:CP  or  ~FEATURE_CP_LONG_OPTIONS
+C19:DC  or  ~FEATURE_DC_LIBM
+C20:DD  or  ~FEATURE_DD_IBS_OBS
+C21:DD  or  ~FEATURE_DD_SIGNAL_HANDLING
+C22:DF  or  ~FEATURE_DF_FANCY
+C23:UNICODE_BIDI_SUPPORT  or  ~UNICODE_NEUTRAL_TABLE
+C24:DU  or  ~FEATURE_DU_DEFAULT_BLOCKSIZE_1K
+C25:MDEV  or  ~FEATURE_MDEV_LOAD_FIRMWARE
+C26:MDEV  or  ~FEATURE_MDEV_CONF
+C27:FEATURE_LAST_SMALL_alt  or  ~FEATURE_LAST_SMALL
+C28:FEATURE_LAST_SMALL_alt  or  ~FEATURE_LAST_FANCY
+C29:FEATURE_LAST_SMALL  or  FEATURE_LAST_FANCY  or  ~FEATURE_LAST_SMALL_alt
+C30:~FEATURE_LAST_SMALL  or  ~FEATURE_LAST_FANCY
+C31:UNLZMA  or  ~FEATURE_LZMA_FAST
+C32:UNLZMA  or  ~LZMA
+C33:TUNCTL  or  ~FEATURE_TUNCTL_UG
+C34:FEATURE_KILL_REMOVED  or  ~FEATURE_KILL_DELAY
+C35:FEATURE_KILL_DELAY  or  ~FEATURE_KILL_REMOVED
+C36:UNEXPAND  or  ~FEATURE_UNEXPAND_LONG_OPTIONS
+C37:root  or  ~FEATURE_MOUNT_LOOP
+C38:root  or  ~RX
+C39:root  or  ~CMP
+C40:root  or  ~VOLNAME
+C41:root  or  ~SMEMCAP
+C42:root  or  ~SWAPONOFF
+C43:root  or  ~LOGNAME
+C44:root  or  ~UNICODE_SUPPORT
+C45:root  or  ~TFTP
+C46:root  or  ~FEATURE_UNIX_LOCAL
+C47:root  or  ~FEATURE_PS_UNUSUAL_SYSTEMS
+C48:root  or  ~UNZIP
+C49:root  or  ~FBSPLASH
+C50:root  or  ~DMESG
+C51:root  or  ~UDHCP_DEBUG
+C52:root  or  ~ID
+C53:root  or  ~VCONFIG
+C54:root  or  ~FTPPUT
+C55:root  or  ~SED
+C56:root  or  ~FEATURE_VOLUMEID_ROMFS
+C57:root  or  ~DELUSER
+C58:root  or  ~CHAT
+C59:root  or  ~GUNZIP
+C60:root  or  ~FEATURE_VOLUMEID_LINUXRAID
+C61:root  or  ~CPIO
+C62:root  or  ~BUSYBOX_EXEC_PATH
+C63:root  or  ~PATCH
+C64:root  or  ~SV
+C65:root  or  ~BASENAME
+C66:root  or  ~CATV
+C67:root  or  ~MKTEMP
+C68:root  or  ~LOADKMAP
+C69:root  or  ~SETCONSOLE
+C70:root  or  ~PASSWD
+C71:root  or  ~FEATURE_VOLUMEID_LINUXSWAP
+C72:root  or  ~ETHER_WAKE
+C73:root  or  ~BBCONFIG
+C74:root  or  ~MKFS_REISER
+C75:root  or  ~TR
+C76:root  or  ~INCLUDE_SUSv2
+C77:root  or  ~GETSEBOOL
+C78:root  or  ~WALL
+C79:root  or  ~LN
+C80:root  or  ~BOOTCHARTD
+C81:root  or  ~UNEXPAND
+C82:root  or  ~WHOAMI
+C83:root  or  ~DEFAULT_MODULES_DIR
+C84:root  or  ~FEATURE_FAST_TOP
+C85:root  or  ~LPR
+C86:root  or  ~GZIP
+C87:root  or  ~FEATURE_SH_IS_HUSH_alt
+C88:root  or  ~VLOCK
+C89:root  or  ~MKFS_EXT2
+C90:root  or  ~SHOW_USAGE
+C91:root  or  ~SYSLOGD
+C92:root  or  ~IPCALC
+C93:root  or  ~DIFF
+C94:root  or  ~CHGRP
+C95:root  or  ~READAHEAD
+C96:root  or  ~SELINUX
+C97:root  or  ~FEATURE_SHADOWPASSWDS
+C98:root  or  ~LZOP
+C99:root  or  ~UNLZMA
+C100:root  or  ~CONSPY
+C101:root  or  ~LONG_OPTS
+C102:root  or  ~MSH
+C103:root  or  ~FDFORMAT
+C104:root  or  ~DUMPKMAP
+C105:root  or  ~FEATURE_IPV6
+C106:root  or  ~NTPD
+C107:root  or  ~SORT
+C108:root  or  ~DEFAULT_DEPMOD_FILE
+C109:root  or  ~RDATE
+C110:root  or  ~EXTRA_CFLAGS
+C111:root  or  ~ADDUSER
+C112:root  or  ~FAKEIDENTD
+C113:root  or  ~FEATURE_VOLUMEID_ISO9660
+C114:root  or  ~TRUE
+C115:root  or  ~MOUNT
+C116:root  or  ~DEVFSD
+C117:root  or  ~FEATURE_CLEAN_UP
+C118:root  or  ~CTTYHACK
+C119:root  or  ~SUM
+C120:root  or  ~ZCIP
+C121:root  or  ~FEATURE_MODUTILS_ALIAS
+C122:root  or  ~UNCOMPRESS
+C123:root  or  ~PIDOF
+C124:root  or  ~SULOGIN
+C125:root  or  ~MDEV
+C126:root  or  ~LOAD_POLICY
+C127:root  or  ~TAIL
+C128:root  or  ~CROND
+C129:root  or  ~IPCS
+C130:root  or  ~NOMMU
+C131:root  or  ~FEATURE_PRESERVE_HARDLINKS
+C132:root  or  ~UBIATTACH
+C133:root  or  ~DF
+C134:root  or  ~UMOUNT
+C135:root  or  ~IPROUTE
+C136:root  or  ~READLINK
+C137:root  or  ~SVLOGD
+C138:root  or  ~PASSWORD_MINLEN
+C139:root  or  ~CHPST
+C140:root  or  ~FREE
+C141:root  or  ~SETFILES
+C142:root  or  ~FLASH_LOCK
+C143:root  or  ~MOUNTPOINT
+C144:root  or  ~FEATURE_2_4_MODULES
+C145:root  or  ~LSPCI
+C146:root  or  ~FEATURE_SEAMLESS_Z
+C147:root  or  ~IOCTL_HEX2STR_ERROR
+C148:root  or  ~HALT
+C149:root  or  ~TASKSET
+C150:root  or  ~KILL
+C151:root  or  ~IOSTAT
+C152:root  or  ~EJECT
+C153:root  or  ~HTTPD
+C154:root  or  ~ADJTIMEX
+C155:root  or  ~USLEEP
+C156:root  or  ~MKDIR
+C157:root  or  ~LOADFONT
+C158:root  or  ~PRINTENV
+C159:root  or  ~FSCK_MINIX
+C160:root  or  ~FEATURE_INSTALLER
+C161:root  or  ~MV
+C162:root  or  ~POPMAILDIR
+C163:root  or  ~SETENFORCE
+C164:root  or  ~RUNSV
+C165:root  or  ~NMETER
+C166:root  or  ~DNSD
+C167:root  or  ~HOSTNAME
+C168:root  or  ~CHRT
+C169:root  or  ~FEATURE_EDITING
+C170:root  or  ~TAR
+C171:root  or  ~TCPSVD
+C172:root  or  ~GETTY
+C173:root  or  ~SESTATUS
+C174:root  or  ~PRINTF
+C175:root  or  ~FEATURE_VOLUMEID_SYSV
+C176:root  or  ~FEATURE_VOLUMEID_JFS
+C177:root  or  ~RENICE
+C178:root  or  ~GREP
+C179:root  or  ~MAKEDEVS
+C180:root  or  ~IFUPDOWN_UDHCPC_CMD_OPTIONS
+C181:root  or  ~TEST
+C182:root  or  ~INIT
+C183:root  or  ~FEATURE_AUTOWIDTH
+C184:root  or  ~DEBUG
+C185:root  or  ~COMM
+C186:root  or  ~BEEP
+C187:root  or  ~ACPID
+C188:root  or  ~FEATURE_VOLUMEID_XFS
+C189:root  or  ~SETARCH
+C190:root  or  ~FLASHCP
+C191:root  or  ~LPQ
+C192:root  or  ~TELNETD
+C193:root  or  ~FDFLUSH
+C194:root  or  ~FEATURE_SH_NOFORK
+C195:root  or  ~DIRNAME
+C196:root  or  ~FEATURE_VOLUMEID_OCFS2
+C197:root  or  ~WGET
+C198:root  or  ~SETLOGCONS
+C199:root  or  ~CP
+C200:root  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt
+C201:root  or  ~HAVE_DOT_CONFIG
+C202:root  or  ~PIVOT_ROOT
+C203:root  or  ~UNXZ
+C204:root  or  ~NSLOOKUP
+C205:root  or  ~FTPGET
+C206:root  or  ~MATCHPATHCON
+C207:root  or  ~HUSH
+C208:root  or  ~NANDWRITE
+C209:root  or  ~SCRIPT
+C210:root  or  ~STTY
+C211:root  or  ~PMAP
+C212:root  or  ~TFTPD
+C213:root  or  ~OPENVT
+C214:root  or  ~BUILD_LIBBUSYBOX
+C215:root  or  ~FOLD
+C216:root  or  ~UUENCODE
+C217:root  or  ~HEAD
+C218:root  or  ~BB_SYSCTL
+C219:root  or  ~UDHCPC_SLACK_FOR_BUGGY_SERVERS
+C220:root  or  ~ADD_SHELL
+C221:root  or  ~SLATTACH
+C222:root  or  ~FEATURE_DEVFS
+C223:root  or  ~SHOWKEY
+C224:root  or  ~LOCALE_SUPPORT
+C225:root  or  ~SH_MATH_SUPPORT
+C226:root  or  ~UNAME
+C227:root  or  ~CHOWN
+C228:root  or  ~SETUIDGID
+C229:root  or  ~START_STOP_DAEMON
+C230:root  or  ~FINDFS
+C231:root  or  ~HDPARM
+C232:root  or  ~MAN
+C233:root  or  ~FEATURE_NON_POSIX_CP
+C234:root  or  ~REFORMIME
+C235:root  or  ~PIPE_PROGRESS
+C236:root  or  ~RAIDAUTORUN
+C237:root  or  ~STRINGS
+C238:root  or  ~RDEV
+C239:root  or  ~DPKG_DEB
+C240:root  or  ~REALPATH
+C241:root  or  ~MKFS_VFAT
+C242:root  or  ~CAL
+C243:root  or  ~SENDMAIL
+C244:root  or  ~IFPLUGD
+C245:root  or  ~MD5SUM
+C246:root  or  ~FUSER
+C247:root  or  ~UBIDETACH
+C248:root  or  ~GETOPT
+C249:root  or  ~INSTALL
+C250:root  or  ~UDHCPC
+C251:root  or  ~FEATURE_BUFFERS_GO_IN_BSS_alt
+C252:root  or  ~TAC
+C253:root  or  ~FEATURE_LOADFONT_PSF2
+C254:root  or  ~DD
+C255:root  or  ~FEATURE_HUMAN_READABLE
+C256:root  or  ~RUN_PARTS
+C257:root  or  ~FEATURE_VERBOSE_CP_MESSAGE
+C258:root  or  ~WERROR
+C259:root  or  ~BUNZIP2
+C260:root  or  ~FTPD
+C261:root  or  ~TRACEROUTE
+C262:root  or  ~RFKILL
+C263:root  or  ~FALSE
+C264:root  or  ~CHATTR
+C265:root  or  ~LFS
+C266:root  or  ~FSYNC
+C267:root  or  ~REV
+C268:root  or  ~FEATURE_BASH_IS_HUSH_alt
+C269:root  or  ~CHPASSWD
+C270:root  or  ~RESTORECON
+C271:root  or  ~DU
+C272:root  or  ~FEATURE_INSMOD_LOADINKMEM
+C273:root  or  ~EXTRA_COMPAT
+C274:root  or  ~USE_PORTABLE_CODE
+C275:root  or  ~PSCAN
+C276:root  or  ~SHA512SUM
+C277:root  or  ~DATE
+C278:root  or  ~SETFONT
+C279:root  or  ~RUNLEVEL
+C280:root  or  ~IONICE
+C281:root  or  ~RESIZE
+C282:root  or  ~FLASH_UNLOCK
+C283:root  or  ~FEATURE_LOADFONT_RAW
+C284:root  or  ~IFUPDOWN
+C285:root  or  ~FEATURE_SUID
+C286:root  or  ~ARP
+C287:root  or  ~CHCON
+C288:root  or  ~AR
+C289:root  or  ~READPROFILE
+C290:root  or  ~ENVUIDGID
+C291:root  or  ~LENGTH
+C292:root  or  ~ADDGROUP
+C293:root  or  ~BASE64
+C294:root  or  ~RUNCON
+C295:root  or  ~DMALLOC_alt
+C296:root  or  ~IP
+C297:root  or  ~SEQ
+C298:root  or  ~FEATURE_SYSLOG
+C299:root  or  ~FEATURE_PREFER_APPLETS
+C300:root  or  ~DEALLOCVT
+C301:root  or  ~MKSWAP
+C302:root  or  ~MICROCOM
+C303:root  or  ~GETENFORCE
+C304:root  or  ~LS
+C305:root  or  ~ROUTE
+C306:root  or  ~UUDECODE
+C307:root  or  ~TTYSIZE
+C308:root  or  ~EXPR
+C309:root  or  ~IPRULE
+C310:root  or  ~WATCH
+C311:root  or  ~FGCONSOLE
+C312:root  or  ~FSCK
+C313:root  or  ~CRYPTPW
+C314:root  or  ~ED
+C315:root  or  ~WHO
+C316:root  or  ~FEATURE_SEAMLESS_GZ
+C317:root  or  ~MAKEMIME
+C318:root  or  ~FLOCK
+C319:root  or  ~BRCTL
+C320:root  or  ~DESKTOP
+C321:root  or  ~PLATFORM_LINUX
+C322:root  or  ~LOGGER
+C323:root  or  ~TIMEOUT
+C324:root  or  ~LSUSB
+C325:root  or  ~FEATURE_SEAMLESS_LZMA
+C326:root  or  ~MT
+C327:root  or  ~DEVMEM
+C328:root  or  ~POWERTOP
+C329:root  or  ~TEE
+C330:root  or  ~FEATURE_SH_STANDALONE
+C331:root  or  ~FEATURE_DEVPTS
+C332:root  or  ~HEXDUMP
+C333:root  or  ~SWITCH_ROOT
+C334:root  or  ~TUNCTL
+C335:root  or  ~FEATURE_INSMOD_KSYMOOPS_SYMBOLS
+C336:root  or  ~LAST
+C337:root  or  ~MODPROBE_SMALL
+C338:root  or  ~LOGIN
+C339:root  or  ~BLOCKDEV
+C340:root  or  ~FDISK
+C341:root  or  ~MORE
+C342:root  or  ~KLOGD
+C343:root  or  ~CROSS_COMPILER_PREFIX
+C344:root  or  ~RUNSVDIR
+C345:root  or  ~RTCWAKE
+C346:root  or  ~FIND
+C347:root  or  ~FEATURE_MD5_SHA1_SUM_CHECK
+C348:root  or  ~DC
+C349:root  or  ~RPM2CPIO
+C350:root  or  ~SLEEP
+C351:root  or  ~MESG
+C352:root  or  ~IPTUNNEL
+C353:root  or  ~INSTALL_APPLET_DONT_alt
+C354:root  or  ~PWD
+C355:root  or  ~AWK
+C356:root  or  ~ENV
+C357:root  or  ~SPLIT
+C358:root  or  ~ASH
+C359:root  or  ~WHICH
+C360:root  or  ~FEATURE_WTMP
+C361:root  or  ~CHMOD
+C362:root  or  ~ENVDIR
+C363:root  or  ~DELGROUP
+C364:root  or  ~CUT
+C365:root  or  ~SETSID
+C366:root  or  ~SHA1SUM
+C367:root  or  ~USE_BB_PWD_GRP
+C368:root  or  ~NOHUP
+C369:root  or  ~TOP
+C370:root  or  ~RPM
+C371:root  or  ~BZIP2
+C372:root  or  ~FLASH_ERASEALL
+C373:root  or  ~LPD
+C374:root  or  ~FEATURE_HWIB
+C375:root  or  ~FEATURE_PREFER_IPV4_ADDRESS
+C376:root  or  ~FEATURE_INSMOD_TRY_MMAP
+C377:root  or  ~STAT
+C378:root  or  ~FEATURE_VOLUMEID_CRAMFS
+C379:root  or  ~FEATURE_VOLUMEID_BTRFS
+C380:root  or  ~FEATURE_SH_EXTRA_QUIET
+C381:root  or  ~SHA256SUM
+C382:root  or  ~IPLINK
+C383:root  or  ~FEATURE_VOLUMEID_HFS
+C384:root  or  ~IPCRM
+C385:root  or  ~SU
+C386:root  or  ~FEATURE_INSMOD_VERSION_CHECKING
+C387:root  or  ~FEATURE_UDHCP_PORT
+C388:root  or  ~UPTIME
+C389:root  or  ~TELNET
+C390:root  or  ~SETKEYCODES
+C391:root  or  ~CLEAR
+C392:root  or  ~FBSET
+C393:root  or  ~CAT
+C394:root  or  ~FEATURE_COPYBUF_KB
+C395:root  or  ~FEATURE_SEAMLESS_XZ
+C396:root  or  ~SELINUXENABLED
+C397:root  or  ~ECHO
+C398:root  or  ~IFENSLAVE
+C399:root  or  ~USE_BB_CRYPT
+C400:root  or  ~WC
+C401:root  or  ~FEATURE_VOLUMEID_EXT
+C402:root  or  ~FREERAMDISK
+C403:root  or  ~INOTIFYD
+C404:root  or  ~TUNE2FS
+C405:root  or  ~SYNC
+C406:root  or  ~UNIQ
+C407:root  or  ~FEATURE_INSMOD_LOAD_MAP
+C408:root  or  ~REMOVE_SHELL
+C409:root  or  ~SETSEBOOL
+C410:root  or  ~BLKID
+C411:root  or  ~NANDDUMP
+C412:root  or  ~INETD
+C413:root  or  ~HOSTID
+C414:root  or  ~HWCLOCK
+C415:root  or  ~FEATURE_MINIX2
+C416:root  or  ~FEATURE_VOLUMEID_UDF
+C417:root  or  ~IPADDR
+C418:root  or  ~VI
+C419:root  or  ~LESS
+C420:root  or  ~FEATURE_SEAMLESS_BZ2
+C421:root  or  ~FEATURE_USE_TERMIOS
+C422:root  or  ~NICE
+C423:root  or  ~PING
+C424:root  or  ~MKFS_MINIX
+C425:root  or  ~OD
+C426:root  or  ~EXPAND
+C427:root  or  ~UDHCPD
+C428:root  or  ~SOFTLIMIT
+C429:root  or  ~DPKG
+C430:root  or  ~YES
+C431:root  or  ~UDHCPC_DEFAULT_SCRIPT
+C432:root  or  ~FEATURE_PIDFILE
+C433:root  or  ~NBDCLIENT
+C434:root  or  ~LSATTR
+C435:root  or  ~CHROOT
+C436:root  or  ~FEATURE_CHECK_TAINTED_MODULE
+C437:root  or  ~TIME
+C438:root  or  ~MD5_SIZE_VS_SPEED
+C439:root  or  ~FEATURE_UDHCP_RFC3397
+C440:root  or  ~CHVT
+C441:root  or  ~PGREP
+C442:root  or  ~VERBOSE_RESOLUTION_ERRORS
+C443:root  or  ~RMDIR
+C444:root  or  ~RM
+C445:root  or  ~CKSUM
+C446:root  or  ~FEATURE_MTAB_SUPPORT
+C447:root  or  ~LOSETUP
+C448:root  or  ~FEATURE_UTMP
+C449:root  or  ~CRONTAB
+C450:root  or  ~NC
+C451:root  or  ~FEATURE_VOLUMEID_REISERFS
+C452:root  or  ~NAMEIF
+C453:root  or  ~PREFIX
+C454:root  or  ~ARPING
+C455:root  or  ~MONOTONIC_SYSCALL
+C456:root  or  ~IFCONFIG
+C457:root  or  ~UDPSVD
+C458:root  or  ~FEATURE_HAVE_RPC
+C459:root  or  ~MKFIFO
+C460:root  or  ~DOS2UNIX
+C461:root  or  ~XARGS
+C462:root  or  ~VOLUMEID
+C463:root  or  ~FEATURE_VOLUMEID_FAT
+C464:root  or  ~KBD_MODE
+C465:root  or  ~FEATURE_MODUTILS_SYMBOLS
+C466:root  or  ~PS
+C467:root  or  ~RESET
+C468:root  or  ~SCRIPTREPLAY
+C469:root  or  ~NETSTAT
+C470:root  or  ~STATIC
+C471:root  or  ~FEATURE_ETC_NETWORKS
+C472:root  or  ~TTY
+C473:root  or  ~TOUCH
+C474:root  or  ~PKILL
+C475:root  or  ~MKNOD
+C476:root  or  ~FEATURE_VOLUMEID_LUKS
+C477:root  or  ~MODINFO
+C478:root  or  ~FEATURE_VOLUMEID_NTFS
+C479:root  or  ~MPSTAT
+C480:root  or  ~WATCHDOG
+C481:UDHCP_DEBUG  or  ~root
+C482:BUSYBOX_EXEC_PATH  or  ~root
+C483:DEFAULT_MODULES_DIR  or  ~root
+C484:FEATURE_SH_IS_HUSH_alt  or  ~root
+C485:DEFAULT_DEPMOD_FILE  or  ~root
+C486:EXTRA_CFLAGS  or  ~root
+C487:PASSWORD_MINLEN  or  ~root
+C488:IFUPDOWN_UDHCPC_CMD_OPTIONS  or  ~root
+C489:INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt  or  ~root
+C490:UDHCPC_SLACK_FOR_BUGGY_SERVERS  or  ~root
+C491:FEATURE_BUFFERS_GO_IN_BSS_alt  or  ~root
+C492:FEATURE_BASH_IS_HUSH_alt  or  ~root
+C493:DMALLOC_alt  or  ~root
+C494:CROSS_COMPILER_PREFIX  or  ~root
+C495:INSTALL_APPLET_DONT_alt  or  ~root
+C496:FEATURE_COPYBUF_KB  or  ~root
+C497:UDHCPC_DEFAULT_SCRIPT  or  ~root
+C498:MD5_SIZE_VS_SPEED  or  ~root
+C499:PREFIX  or  ~root
+C500:TELNET  or  ~FEATURE_TELNET_TTYPE
+C501:TELNET  or  ~FEATURE_TELNET_AUTOLOGIN
+C502:TRACEROUTE  or  ~FEATURE_TRACEROUTE_USE_ICMP
+C503:TRACEROUTE  or  ~FEATURE_TRACEROUTE_VERBOSE
+C504:TRACEROUTE  or  ~FEATURE_TRACEROUTE_SOURCE_ROUTE
+C505:TRACEROUTE  or  ~TRACEROUTE6
+C506:DMALLOC_alt  or  ~NO_DEBUG_LIB
+C507:DMALLOC_alt  or  ~DMALLOC
+C508:DMALLOC_alt  or  ~EFENCE
+C509:NO_DEBUG_LIB  or  DMALLOC  or  EFENCE  or  ~DMALLOC_alt
+C510:~NO_DEBUG_LIB  or  ~DMALLOC
+C511:~NO_DEBUG_LIB  or  ~EFENCE
+C512:~DMALLOC  or  ~EFENCE
+C513:MODPROBE_SMALL  or  ~DEPMOD
+C514:MODPROBE_SMALL  or  ~FEATURE_MODPROBE_SMALL_OPTIONS_ON_CMDLINE
+C515:MODPROBE_SMALL  or  ~LSMOD
+C516:MODPROBE_SMALL  or  ~RMMOD
+C517:MODPROBE_SMALL  or  ~MODPROBE
+C518:MODPROBE_SMALL  or  ~INSMOD
+C519:MODPROBE_SMALL  or  ~FEATURE_MODPROBE_SMALL_CHECK_ALREADY_LOADED
+C520:SETCONSOLE  or  ~FEATURE_SETCONSOLE_LONG_OPTIONS
+C521:FDISK  or  ~FDISK_SUPPORT_LARGE_DISKS
+C522:FDISK  or  ~FEATURE_FDISK_WRITABLE
+C523:FEATURE_SH_IS_HUSH_alt  or  ~FEATURE_SH_IS_ASH
+C524:FEATURE_SH_IS_HUSH_alt  or  ~FEATURE_SH_IS_HUSH
+C525:FEATURE_SH_IS_HUSH_alt  or  ~FEATURE_SH_IS_NONE
+C526:FEATURE_SH_IS_ASH  or  FEATURE_SH_IS_HUSH  or  FEATURE_SH_IS_NONE  or  ~FEATURE_SH_IS_HUSH_alt
+C527:~FEATURE_SH_IS_ASH  or  ~FEATURE_SH_IS_HUSH
+C528:~FEATURE_SH_IS_ASH  or  ~FEATURE_SH_IS_NONE
+C529:~FEATURE_SH_IS_HUSH  or  ~FEATURE_SH_IS_NONE
+C530:IP  or  ~FEATURE_IP_RULE
+C531:IP  or  ~FEATURE_IP_LINK
+C532:IP  or  ~FEATURE_IP_TUNNEL
+C533:IP  or  ~FEATURE_IP_ROUTE
+C534:IP  or  ~FEATURE_IP_ADDRESS
+C535:IP  or  ~FEATURE_IP_SHORT_FORMS
+C536:IP  or  ~FEATURE_IP_RARE_PROTOCOLS
+C537:USE_BB_PWD_GRP  or  ~USE_BB_SHADOW
+C538:FEATURE_SUID  or  ~FEATURE_SUID_CONFIG
+C539:FEATURE_MDEV_RENAME  or  ~FEATURE_MDEV_RENAME_REGEXP
+C540:TFTPD  or  ~FEATURE_TFTP_PUT
+C541:TFTPD  or  ~FEATURE_TFTP_BLOCKSIZE
+C542:TFTPD  or  ~TFTP_DEBUG
+C543:TFTPD  or  ~FEATURE_TFTP_GET
+C544:PING  or  ~PING6
+C545:PING  or  ~FEATURE_FANCY_PING
+C546:START_STOP_DAEMON  or  ~FEATURE_START_STOP_DAEMON_LONG_OPTIONS
+C547:START_STOP_DAEMON  or  ~FEATURE_START_STOP_DAEMON_FANCY
+C548:GZIP  or  ~FEATURE_GZIP_LONG_OPTIONS
+C549:LS  or  ~FEATURE_LS_TIMESTAMPS
+C550:LS  or  ~FEATURE_LS_FILETYPES
+C551:LS  or  ~FEATURE_LS_RECURSIVE
+C552:LS  or  ~FEATURE_LS_COLOR
+C553:LS  or  ~FEATURE_LS_FOLLOWLINKS
+C554:LS  or  ~FEATURE_LS_USERNAME
+C555:LS  or  ~FEATURE_LS_SORTFILES
+C556:LOGREAD  or  ~FEATURE_LOGREAD_REDUCED_LOCKING
+C557:FEATURE_CALL_TELINIT  or  ~TELINIT_PATH
+C558:TELINIT_PATH  or  ~FEATURE_CALL_TELINIT
+C559:ADDUSER  or  ~LAST_SYSTEM_ID
+C560:ADDUSER  or  ~FEATURE_ADDUSER_LONG_OPTIONS
+C561:ADDUSER  or  ~FEATURE_CHECK_NAMES
+C562:ADDUSER  or  ~FIRST_SYSTEM_ID
+C563:LAST_SYSTEM_ID  or  ~ADDUSER
+C564:FIRST_SYSTEM_ID  or  ~ADDUSER
+C565:MV  or  ~FEATURE_MV_LONG_OPTIONS
+C566:NC  or  ~NC_SERVER
+C567:NC  or  ~NC_110_COMPAT
+C568:NC  or  ~NC_EXTRA
+C569:ACPID  or  ~FEATURE_ACPID_COMPAT
+C570:LESS  or  ~FEATURE_LESS_FLAGS
+C571:LESS  or  ~FEATURE_LESS_MAXLINES
+C572:LESS  or  ~FEATURE_LESS_REGEXP
+C573:LESS  or  ~FEATURE_LESS_WINCH
+C574:LESS  or  ~FEATURE_LESS_BRACKETS
+C575:LESS  or  ~FEATURE_LESS_MARKS
+C576:LESS  or  ~FEATURE_LESS_DASHCMD
+C577:FEATURE_LESS_MAXLINES  or  ~LESS
+C578:XARGS  or  ~FEATURE_XARGS_SUPPORT_CONFIRMATION
+C579:XARGS  or  ~FEATURE_XARGS_SUPPORT_QUOTES
+C580:XARGS  or  ~FEATURE_XARGS_SUPPORT_ZERO_TERM
+C581:XARGS  or  ~FEATURE_XARGS_SUPPORT_TERMOPT
+C582:BOOTCHARTD  or  ~FEATURE_BOOTCHARTD_CONFIG_FILE
+C583:BOOTCHARTD  or  ~FEATURE_BOOTCHARTD_BLOATED_HEADER
+C584:FEATURE_TAB_COMPLETION  or  ~FEATURE_USERNAME_COMPLETION
+C585:EXPR  or  ~EXPR_MATH_SUPPORT_64
+C586:DPKG_DEB  or  ~FEATURE_DPKG_DEB_EXTRACT_ONLY
+C587:SLEEP  or  ~FEATURE_FANCY_SLEEP
+C588:PS  or  ~FEATURE_PS_TIME
+C589:PS  or  ~FEATURE_PS_ADDITIONAL_COLUMNS
+C590:PS  or  ~FEATURE_PS_WIDE
+C591:ECHO  or  ~FEATURE_FANCY_ECHO
+C592:INETD  or  ~FEATURE_INETD_RPC
+C593:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_ECHO
+C594:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_DISCARD
+C595:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_TIME
+C596:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_CHARGEN
+C597:INETD  or  ~FEATURE_INETD_SUPPORT_BUILTIN_DAYTIME
+C598:NTPD  or  ~FEATURE_NTPD_SERVER
+C599:MAKEMIME  or  ~FEATURE_MIME_CHARSET
+C600:FEATURE_MIME_CHARSET  or  ~MAKEMIME
+C601:FEATURE_TOP_CPU_USAGE_PERCENTAGE  or  ~FEATURE_TOP_DECIMALS
+C602:FEATURE_TOP_CPU_USAGE_PERCENTAGE  or  ~FEATURE_TOP_CPU_GLOBAL_PERCENTS
+C603:HUSH_BASH_COMPAT  or  ~HUSH_BRACE_EXPANSION
+C604:CPIO  or  ~FEATURE_CPIO_O
+C605:FTPPUT  or  ~FEATURE_FTPGETPUT_LONG_OPTIONS
+C606:SU  or  ~FEATURE_SU_CHECKS_SHELLS
+C607:SU  or  ~FEATURE_SU_SYSLOG
+C608:SV  or  ~SV_DEFAULT_SERVICE_DIR
+C609:SV_DEFAULT_SERVICE_DIR  or  ~SV
+C610:IFCONFIG  or  ~FEATURE_IFCONFIG_STATUS
+C611:IFCONFIG  or  ~FEATURE_IFCONFIG_HW
+C612:IFCONFIG  or  ~FEATURE_IFCONFIG_MEMSTART_IOADDR_IRQ
+C613:IFCONFIG  or  ~FEATURE_IFCONFIG_SLIP
+C614:IFCONFIG  or  ~FEATURE_IFCONFIG_BROADCAST_PLUS
+C615:SWAPONOFF  or  ~FEATURE_SWAPON_PRI
+C616:TR  or  ~FEATURE_TR_CLASSES
+C617:TR  or  ~FEATURE_TR_EQUIV
+C618:FEATURE_BUFFERS_GO_IN_BSS_alt  or  ~FEATURE_BUFFERS_USE_MALLOC
+C619:FEATURE_BUFFERS_GO_IN_BSS_alt  or  ~FEATURE_BUFFERS_GO_ON_STACK
+C620:FEATURE_BUFFERS_GO_IN_BSS_alt  or  ~FEATURE_BUFFERS_GO_IN_BSS
+C621:FEATURE_BUFFERS_USE_MALLOC  or  FEATURE_BUFFERS_GO_ON_STACK  or  FEATURE_BUFFERS_GO_IN_BSS  or  ~FEATURE_BUFFERS_GO_IN_BSS_alt
+C622:~FEATURE_BUFFERS_USE_MALLOC  or  ~FEATURE_BUFFERS_GO_ON_STACK
+C623:~FEATURE_BUFFERS_USE_MALLOC  or  ~FEATURE_BUFFERS_GO_IN_BSS
+C624:~FEATURE_BUFFERS_GO_ON_STACK  or  ~FEATURE_BUFFERS_GO_IN_BSS
+C625:FEATURE_TELNETD_STANDALONE  or  ~FEATURE_TELNETD_INETD_WAIT
+C626:PASSWD  or  ~FEATURE_PASSWD_WEAK_CHECK
+C627:IFUPDOWN  or  ~FEATURE_IFUPDOWN_IPV4
+C628:IFUPDOWN  or  ~FEATURE_IFUPDOWN_IP
+C629:IFUPDOWN  or  ~IFUPDOWN_IFSTATE_PATH
+C630:IFUPDOWN  or  ~FEATURE_IFUPDOWN_MAPPING
+C631:IFUPDOWN  or  ~FEATURE_IFUPDOWN_IPV6
+C632:IFUPDOWN  or  ~FEATURE_IFUPDOWN_EXTERNAL_DHCP
+C633:IFUPDOWN_IFSTATE_PATH  or  ~IFUPDOWN
+C634:VI  or  ~FEATURE_VI_DOT_CMD
+C635:VI  or  ~FEATURE_VI_ASK_TERMINAL
+C636:VI  or  ~FEATURE_VI_WIN_RESIZE
+C637:VI  or  ~FEATURE_VI_8BIT
+C638:VI  or  ~FEATURE_VI_SET
+C639:VI  or  ~FEATURE_ALLOW_EXEC
+C640:VI  or  ~FEATURE_VI_MAX_LEN
+C641:VI  or  ~FEATURE_VI_READONLY
+C642:VI  or  ~FEATURE_VI_USE_SIGNALS
+C643:VI  or  ~FEATURE_VI_OPTIMIZE_CURSOR
+C644:VI  or  ~FEATURE_VI_SETOPTS
+C645:VI  or  ~FEATURE_VI_SEARCH
+C646:VI  or  ~FEATURE_VI_YANKMARK
+C647:VI  or  ~FEATURE_VI_COLON
+C648:FEATURE_VI_MAX_LEN  or  ~VI
+C649:SETFONT  or  ~DEFAULT_SETFONT_DIR
+C650:SETFONT  or  ~FEATURE_SETFONT_TEXTUAL_MAP
+C651:DEFAULT_SETFONT_DIR  or  ~SETFONT
+C652:LAST  or  ~FEATURE_LAST_SMALL_alt
+C653:FEATURE_LAST_SMALL_alt  or  ~LAST
+C654:FEATURE_TFTP_BLOCKSIZE  or  ~FEATURE_TFTP_PROGRESS_BAR
+C655:WC  or  ~FEATURE_WC_LARGE
+C656:SYSLOGD  or  ~FEATURE_ROTATE_LOGFILE
+C657:SYSLOGD  or  ~FEATURE_SYSLOGD_DUP
+C658:SYSLOGD  or  ~FEATURE_REMOTE_LOG
+C659:SYSLOGD  or  ~FEATURE_IPC_SYSLOG
+C660:SYSLOGD  or  ~FEATURE_SYSLOGD_READ_BUFFER_SIZE
+C661:FEATURE_SYSLOGD_READ_BUFFER_SIZE  or  ~SYSLOGD
+C662:GREP  or  ~FEATURE_GREP_FGREP_ALIAS
+C663:GREP  or  ~FEATURE_GREP_CONTEXT
+C664:GREP  or  ~FEATURE_GREP_EGREP_ALIAS
+C665:FEATURE_SUID_CONFIG  or  ~FEATURE_SUID_CONFIG_QUIET
+C666:LOGIN  or  ~LOGIN_SCRIPTS
+C667:LOGIN  or  ~PAM
+C668:LOGIN  or  ~FEATURE_SECURETTY
+C669:LOGIN  or  ~FEATURE_NOLOGIN
+C670:CHAT  or  ~FEATURE_CHAT_CLR_ABORT
+C671:CHAT  or  ~FEATURE_CHAT_SEND_ESCAPES
+C672:CHAT  or  ~FEATURE_CHAT_NOFAIL
+C673:CHAT  or  ~FEATURE_CHAT_IMPLICIT_CR
+C674:CHAT  or  ~FEATURE_CHAT_SWALLOW_OPTS
+C675:CHAT  or  ~FEATURE_CHAT_VAR_ABORT_LEN
+C676:CHAT  or  ~FEATURE_CHAT_TTY_HIFI
+C677:UNXZ  or  ~XZ
+C678:KILL  or  ~KILLALL5
+C679:KILL  or  ~KILLALL
+C680:INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt  or  ~INSTALL_SH_APPLET_SYMLINK
+C681:INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt  or  ~INSTALL_SH_APPLET_HARDLINK
+C682:INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER
+C683:INSTALL_SH_APPLET_SYMLINK  or  INSTALL_SH_APPLET_HARDLINK  or  INSTALL_SH_APPLET_SCRIPT_WRAPPER  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER_alt
+C684:~INSTALL_SH_APPLET_SYMLINK  or  ~INSTALL_SH_APPLET_HARDLINK
+C685:~INSTALL_SH_APPLET_SYMLINK  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER
+C686:~INSTALL_SH_APPLET_HARDLINK  or  ~INSTALL_SH_APPLET_SCRIPT_WRAPPER
+C687:TAR  or  ~FEATURE_TAR_LONG_OPTIONS
+C688:TAR  or  ~FEATURE_TAR_SELINUX
+C689:TAR  or  ~FEATURE_TAR_NOPRESERVE_TIME
+C690:TAR  or  ~FEATURE_TAR_CREATE
+C691:TAR  or  ~FEATURE_TAR_OLDGNU_COMPATIBILITY
+C692:TAR  or  ~FEATURE_TAR_FROM
+C693:TAR  or  ~FEATURE_TAR_UNAME_GNAME
+C694:TAR  or  ~FEATURE_TAR_GNU_EXTENSIONS
+C695:TAR  or  ~FEATURE_TAR_AUTODETECT
+C696:TAR  or  ~FEATURE_TAR_OLDSUN_COMPATIBILITY
+C697:FEATURE_CPIO_O  or  ~FEATURE_CPIO_P
+C698:MKSWAP  or  ~FEATURE_MKSWAP_UUID
+C699:RUNCON  or  ~FEATURE_RUNCON_LONG_OPTIONS
+C700:LSMOD  or  ~FEATURE_LSMOD_PRETTY_2_6_OUTPUT
+C701:MODPROBE  or  ~FEATURE_MODPROBE_BLACKLIST
+C702:FEATURE_DD_SIGNAL_HANDLING  or  ~FEATURE_DD_THIRD_STATUS_LINE
+C703:DOS2UNIX  or  ~UNIX2DOS
+C704:TEE  or  ~FEATURE_TEE_USE_BLOCK_IO
+C705:RUNSVDIR  or  ~FEATURE_RUNSVDIR_LOG
+C706:FEATURE_EDITING  or  ~FEATURE_EDITING_ASK_TERMINAL
+C707:FEATURE_EDITING  or  ~FEATURE_EDITING_FANCY_PROMPT
+C708:FEATURE_EDITING  or  ~FEATURE_TAB_COMPLETION
+C709:FEATURE_EDITING  or  ~FEATURE_EDITING_HISTORY
+C710:FEATURE_EDITING  or  ~FEATURE_EDITING_MAX_LEN
+C711:FEATURE_EDITING  or  ~FEATURE_EDITING_VI
+C712:FEATURE_EDITING  or  ~FEATURE_EDITING_SAVEHISTORY
+C713:FEATURE_EDITING_HISTORY  or  ~FEATURE_EDITING
+C714:FEATURE_EDITING_MAX_LEN  or  ~FEATURE_EDITING
+C715:HUSH  or  ~HUSH_CASE
+C716:HUSH  or  ~HUSH_RANDOM_SUPPORT
+C717:HUSH  or  ~HUSH_EXPORT_N
+C718:HUSH  or  ~HUSH_INTERACTIVE
+C719:HUSH  or  ~HUSH_FUNCTIONS
+C720:HUSH  or  ~HUSH_BASH_COMPAT
+C721:HUSH  or  ~HUSH_IF
+C722:HUSH  or  ~HUSH_HELP
+C723:HUSH  or  ~HUSH_TICK
+C724:HUSH  or  ~HUSH_LOOPS
+C725:HUSH  or  ~HUSH_MODE_X
+C726:PIDOF  or  ~FEATURE_PIDOF_SINGLE
+C727:PIDOF  or  ~FEATURE_PIDOF_OMIT
+C728:DIFF  or  ~FEATURE_DIFF_LONG_OPTIONS
+C729:DIFF  or  ~FEATURE_DIFF_DIR
+C730:FEATURE_FDISK_WRITABLE  or  ~FEATURE_AIX_LABEL
+C731:FEATURE_FDISK_WRITABLE  or  ~FEATURE_SGI_LABEL
+C732:FEATURE_FDISK_WRITABLE  or  ~FEATURE_GPT_LABEL
+C733:FEATURE_FDISK_WRITABLE  or  ~FEATURE_OSF_LABEL
+C734:FEATURE_FDISK_WRITABLE  or  ~FEATURE_FDISK_ADVANCED
+C735:FEATURE_FDISK_WRITABLE  or  ~FEATURE_SUN_LABEL
+C736:KLOGD  or  ~FEATURE_KLOGD_KLOGCTL
+C737:BEEP  or  ~FEATURE_BEEP_LENGTH_MS
+C738:BEEP  or  ~FEATURE_BEEP_FREQ
+C739:FEATURE_BEEP_LENGTH_MS  or  ~BEEP
+C740:FEATURE_BEEP_FREQ  or  ~BEEP
+C741:NAMEIF  or  ~FEATURE_NAMEIF_EXTENDED
+C742:FEATURE_MAKEDEVS_TABLE_alt  or  ~FEATURE_MAKEDEVS_LEAF
+C743:FEATURE_MAKEDEVS_TABLE_alt  or  ~FEATURE_MAKEDEVS_TABLE
+C744:FEATURE_MAKEDEVS_LEAF  or  FEATURE_MAKEDEVS_TABLE  or  ~FEATURE_MAKEDEVS_TABLE_alt
+C745:~FEATURE_MAKEDEVS_LEAF  or  ~FEATURE_MAKEDEVS_TABLE
+C746:FEATURE_BASH_IS_HUSH_alt  or  ~FEATURE_BASH_IS_ASH
+C747:FEATURE_BASH_IS_HUSH_alt  or  ~FEATURE_BASH_IS_HUSH
+C748:FEATURE_BASH_IS_HUSH_alt  or  ~FEATURE_BASH_IS_NONE
+C749:FEATURE_BASH_IS_ASH  or  FEATURE_BASH_IS_HUSH  or  FEATURE_BASH_IS_NONE  or  ~FEATURE_BASH_IS_HUSH_alt
+C750:~FEATURE_BASH_IS_ASH  or  ~FEATURE_BASH_IS_HUSH
+C751:~FEATURE_BASH_IS_ASH  or  ~FEATURE_BASH_IS_NONE
+C752:~FEATURE_BASH_IS_HUSH  or  ~FEATURE_BASH_IS_NONE
+C753:FEATURE_INSTALLER  or  ~INSTALL_NO_USR
+C754:READLINK  or  ~FEATURE_READLINK_FOLLOW
+C755:TAIL  or  ~FEATURE_FANCY_TAIL
+C756:CROND  or  ~FEATURE_CROND_CALL_SENDMAIL
+C757:CROND  or  ~FEATURE_CROND_D
+C758:CROND  or  ~FEATURE_CROND_DIR
+C759:FEATURE_CROND_DIR  or  ~CROND
+C760:HTTPD  or  ~FEATURE_HTTPD_USE_SENDFILE
+C761:HTTPD  or  ~FEATURE_HTTPD_GZIP
+C762:HTTPD  or  ~FEATURE_HTTPD_SETUID
+C763:HTTPD  or  ~FEATURE_HTTPD_CGI
+C764:HTTPD  or  ~FEATURE_HTTPD_BASIC_AUTH
+C765:HTTPD  or  ~FEATURE_HTTPD_PROXY
+C766:HTTPD  or  ~FEATURE_HTTPD_RANGES
+C767:HTTPD  or  ~FEATURE_HTTPD_ENCODE_URL_STR
+C768:HTTPD  or  ~FEATURE_HTTPD_ERROR_PAGES
+C769:TEST  or  ~FEATURE_TEST_64
+C770:ENV  or  ~FEATURE_ENV_LONG_OPTIONS
+C771:FEATURE_HTTPD_BASIC_AUTH  or  ~FEATURE_HTTPD_AUTH_MD5
+C772:RMDIR  or  ~FEATURE_RMDIR_LONG_OPTIONS
+C773:MAKEDEVS  or  ~FEATURE_MAKEDEVS_TABLE_alt
+C774:FEATURE_MAKEDEVS_TABLE_alt  or  ~MAKEDEVS
+C775:CHCON  or  ~FEATURE_CHCON_LONG_OPTIONS
+C776:INIT  or  ~FEATURE_INIT_COREDUMPS
+C777:INIT  or  ~FEATURE_USE_INITTAB
+C778:INIT  or  ~FEATURE_INIT_SCTTY
+C779:INIT  or  ~FEATURE_INIT_SYSLOG
+C780:INIT  or  ~FEATURE_INITRD
+C781:INIT  or  ~INIT_TERMINAL_TYPE
+C782:INIT  or  ~FEATURE_EXTRA_QUIET
+C783:INIT_TERMINAL_TYPE  or  ~INIT
+C784:INSTALL_APPLET_DONT_alt  or  ~INSTALL_APPLET_SYMLINKS
+C785:INSTALL_APPLET_DONT_alt  or  ~INSTALL_APPLET_HARDLINKS
+C786:INSTALL_APPLET_DONT_alt  or  ~INSTALL_APPLET_SCRIPT_WRAPPERS
+C787:INSTALL_APPLET_DONT_alt  or  ~INSTALL_APPLET_DONT
+C788:INSTALL_APPLET_SYMLINKS  or  INSTALL_APPLET_HARDLINKS  or  INSTALL_APPLET_SCRIPT_WRAPPERS  or  INSTALL_APPLET_DONT  or  ~INSTALL_APPLET_DONT_alt
+C789:~INSTALL_APPLET_SYMLINKS  or  ~INSTALL_APPLET_HARDLINKS
+C790:~INSTALL_APPLET_SYMLINKS  or  ~INSTALL_APPLET_SCRIPT_WRAPPERS
+C791:~INSTALL_APPLET_SYMLINKS  or  ~INSTALL_APPLET_DONT
+C792:~INSTALL_APPLET_HARDLINKS  or  ~INSTALL_APPLET_SCRIPT_WRAPPERS
+C793:~INSTALL_APPLET_HARDLINKS  or  ~INSTALL_APPLET_DONT
+C794:~INSTALL_APPLET_SCRIPT_WRAPPERS  or  ~INSTALL_APPLET_DONT
+C795:TOP  or  ~FEATURE_TOP_CPU_USAGE_PERCENTAGE
+C796:TOP  or  ~FEATURE_SHOW_THREADS
+C797:TOP  or  ~FEATURE_TOP_SMP_PROCESS
+C798:TOP  or  ~FEATURE_TOPMEM
+C799:HWCLOCK  or  ~FEATURE_HWCLOCK_LONG_OPTIONS
+C800:HWCLOCK  or  ~FEATURE_HWCLOCK_ADJTIME_FHS
+C801:FEATURE_TOP_CPU_GLOBAL_PERCENTS  or  ~FEATURE_TOP_SMP_CPU
+C802:TELNETD  or  ~FEATURE_TELNETD_STANDALONE
+C803:FIND  or  ~FEATURE_FIND_REGEX
+C804:FIND  or  ~FEATURE_FIND_DELETE
+C805:FIND  or  ~FEATURE_FIND_MAXDEPTH
+C806:FIND  or  ~FEATURE_FIND_NOT
+C807:FIND  or  ~FEATURE_FIND_PRINT0
+C808:FIND  or  ~FEATURE_FIND_NEWER
+C809:FIND  or  ~FEATURE_FIND_CONTEXT
+C810:FIND  or  ~FEATURE_FIND_PERM
+C811:FIND  or  ~FEATURE_FIND_USER
+C812:FIND  or  ~FEATURE_FIND_MMIN
+C813:FIND  or  ~FEATURE_FIND_PRUNE
+C814:FIND  or  ~FEATURE_FIND_INUM
+C815:FIND  or  ~FEATURE_FIND_GROUP
+C816:FIND  or  ~FEATURE_FIND_TYPE
+C817:FIND  or  ~FEATURE_FIND_LINKS
+C818:FIND  or  ~FEATURE_FIND_PAREN
+C819:FIND  or  ~FEATURE_FIND_XDEV
+C820:FIND  or  ~FEATURE_FIND_SIZE
+C821:FIND  or  ~FEATURE_FIND_MTIME
+C822:FIND  or  ~FEATURE_FIND_EXEC
+C823:FIND  or  ~FEATURE_FIND_DEPTH
+C824:FIND  or  ~FEATURE_FIND_PATH
+C825:UMOUNT  or  ~FEATURE_UMOUNT_ALL
+C826:SORT  or  ~FEATURE_SORT_BIG
+C827:BBCONFIG  or  ~FEATURE_COMPRESS_BBCONFIG
+C828:HEAD  or  ~FEATURE_FANCY_HEAD
+C829:HUSH_INTERACTIVE  or  ~HUSH_SAVEHISTORY
+C830:HUSH_INTERACTIVE  or  ~HUSH_JOB
+C831:DEBUG  or  ~DEBUG_PESSIMIZE
+C832:NETSTAT  or  ~FEATURE_NETSTAT_WIDE
+C833:NETSTAT  or  ~FEATURE_NETSTAT_PRG
+C834:FBSET  or  ~FEATURE_FBSET_FANCY
+C835:FBSET  or  ~FEATURE_FBSET_READMODE
+C836:INSTALL  or  ~FEATURE_INSTALL_LONG_OPTIONS
+C837:FEATURE_USE_INITTAB  or  ~FEATURE_KILL_REMOVED
+C838:FEATURE_MDEV_CONF  or  ~FEATURE_MDEV_EXEC
+C839:FEATURE_MDEV_CONF  or  ~FEATURE_MDEV_RENAME
+C840:SPLIT  or  ~FEATURE_SPLIT_FANCY
+C841:ASH  or  ~ASH_BUILTIN_PRINTF
+C842:ASH  or  ~ASH_ALIAS
+C843:ASH  or  ~ASH_CMDCMD
+C844:ASH  or  ~ASH_BASH_COMPAT
+C845:ASH  or  ~ASH_MAIL
+C846:ASH  or  ~ASH_BUILTIN_ECHO
+C847:ASH  or  ~ASH_JOB_CONTROL
+C848:ASH  or  ~ASH_GETOPTS
+C849:ASH  or  ~ASH_OPTIMIZE_FOR_SIZE
+C850:ASH  or  ~ASH_BUILTIN_TEST
+C851:ASH  or  ~ASH_RANDOM_SUPPORT
+C852:ASH  or  ~ASH_EXPAND_PRMT
+C853:MKDIR  or  ~FEATURE_MKDIR_LONG_OPTIONS
+C854:FEATURE_IPC_SYSLOG  or  ~FEATURE_IPC_SYSLOG_BUFFER_SIZE
+C855:FEATURE_IPC_SYSLOG  or  ~LOGREAD
+C856:FEATURE_IPC_SYSLOG_BUFFER_SIZE  or  ~FEATURE_IPC_SYSLOG
+C857:STAT  or  ~FEATURE_STAT_FORMAT
+C858:GETOPT  or  ~FEATURE_GETOPT_LONG
+C859:FEATURE_HTTPD_CGI  or  ~FEATURE_HTTPD_SET_REMOTE_PORT_TO_ENV
+C860:FEATURE_HTTPD_CGI  or  ~FEATURE_HTTPD_CONFIG_WITH_SCRIPT_INTERPR
+C861:FEATURE_LESS_DASHCMD  or  ~FEATURE_LESS_LINENUMS
+C862:BUILD_LIBBUSYBOX  or  ~FEATURE_SHARED_BUSYBOX
+C863:BUILD_LIBBUSYBOX  or  ~FEATURE_INDIVIDUAL
+C864:POPMAILDIR  or  ~FEATURE_POPMAILDIR_DELIVERY
+C865:DELGROUP  or  ~FEATURE_DEL_USER_FROM_GROUP
+C866:USE_BB_CRYPT  or  ~USE_BB_CRYPT_SHA
+C867:REFORMIME  or  ~FEATURE_REFORMIME_COMPAT
+C868:AWK  or  ~FEATURE_AWK_LIBM
+C869:IPCALC  or  ~FEATURE_IPCALC_LONG_OPTIONS
+C870:IPCALC  or  ~FEATURE_IPCALC_FANCY
+C871:SH_MATH_SUPPORT  or  ~SH_MATH_SUPPORT_64
+C872:DEVFSD  or  ~DEVFSD_MODLOAD
+C873:DEVFSD  or  ~DEVFSD_VERBOSE
+C874:DEVFSD  or  ~DEVFSD_FG_NP
+C875:SHOW_USAGE  or  ~FEATURE_COMPRESS_USAGE
+C876:SHOW_USAGE  or  ~FEATURE_VERBOSE_USAGE
+C877:ADDGROUP  or  ~FEATURE_ADDUSER_TO_GROUP
+C878:ADDGROUP  or  ~FEATURE_ADDGROUP_LONG_OPTIONS
+C879:FEATURE_TAR_LONG_OPTIONS  or  ~FEATURE_TAR_TO_COMMAND
+C880:CHOWN  or  ~FEATURE_CHOWN_LONG_OPTIONS
+C881:RESIZE  or  ~FEATURE_RESIZE_PRINT
+C882:WGET  or  ~FEATURE_WGET_TIMEOUT
+C883:WGET  or  ~FEATURE_WGET_STATUSBAR
+C884:WGET  or  ~FEATURE_WGET_AUTHENTICATION
+C885:WGET  or  ~FEATURE_WGET_LONG_OPTIONS
+C886:EJECT  or  ~FEATURE_EJECT_SCSI
+C887:FTPD  or  ~FEATURE_FTP_WRITE
+C888:FTPD  or  ~FEATURE_FTPD_ACCEPT_BROKEN_LIST
+C889:FEATURE_FANCY_SLEEP  or  ~FEATURE_FLOAT_SLEEP
+C890:FEATURE_INSMOD_LOAD_MAP  or  ~FEATURE_INSMOD_LOAD_MAP_FULL
+C891:RUN_PARTS  or  ~FEATURE_RUN_PARTS_LONG_OPTIONS
+C892:RUN_PARTS  or  ~FEATURE_RUN_PARTS_FANCY
+C893:MOUNT  or  ~FEATURE_MOUNT_FSTAB
+C894:MOUNT  or  ~FEATURE_MOUNT_FAKE
+C895:MOUNT  or  ~FEATURE_MOUNT_FLAGS
+C896:MOUNT  or  ~FEATURE_MOUNT_LABEL
+C897:MOUNT  or  ~FEATURE_MOUNT_VERBOSE
+C898:MOUNT  or  ~FEATURE_MOUNT_NFS
+C899:MOUNT  or  ~FEATURE_MOUNT_CIFS
+C900:MOUNT  or  ~FEATURE_MOUNT_HELPERS
+C901:UNICODE_SUPPORT  or  ~SUBST_WCHAR
+C902:UNICODE_SUPPORT  or  ~UNICODE_WIDE_WCHARS
+C903:UNICODE_SUPPORT  or  ~UNICODE_COMBINING_WCHARS
+C904:UNICODE_SUPPORT  or  ~UNICODE_USING_LOCALE
+C905:UNICODE_SUPPORT  or  ~UNICODE_BIDI_SUPPORT
+C906:UNICODE_SUPPORT  or  ~UNICODE_PRESERVE_BROKEN
+C907:UNICODE_SUPPORT  or  ~LAST_SUPPORTED_WCHAR
+C908:UNICODE_SUPPORT  or  ~FEATURE_CHECK_UNICODE_IN_ENV
+C909:SUBST_WCHAR  or  ~UNICODE_SUPPORT
+C910:LAST_SUPPORTED_WCHAR  or  ~UNICODE_SUPPORT
+C911:DATE  or  ~FEATURE_DATE_ISOFMT
+C912:DATE  or  ~FEATURE_DATE_NANO
+C913:DATE  or  ~FEATURE_DATE_COMPAT
+C914:TASKSET  or  ~FEATURE_TASKSET_FANCY
+C915:LZOP  or  ~LZOP_COMPR_HIGH
+C916:FEATURE_IFUPDOWN_IP  or  ~FEATURE_IFUPDOWN_IFCONFIG_BUILTIN
+C917:FEATURE_IFUPDOWN_IP  or  ~FEATURE_IFUPDOWN_IP_BUILTIN
+C918:DMESG  or  ~FEATURE_DMESG_PRETTY
+C919:UDHCPD  or  ~DHCPD_LEASES_FILE
+C920:UDHCPD  or  ~FEATURE_UDHCPD_WRITE_LEASES_EARLY
+C921:UDHCPD  or  ~DHCPRELAY
+C922:UDHCPD  or  ~DUMPLEASES
+C923:DHCPD_LEASES_FILE  or  ~UDHCPD
+C924:FEATURE_MOUNT_LOOP  or  ~FEATURE_MOUNT_LOOP_CREATE
+C925:UDHCPC  or  ~FEATURE_UDHCPC_ARPING
+C926:FEATURE_LS_COLOR  or  ~FEATURE_LS_COLOR_IS_DEFAULT
+C927:FEATURE_BRCTL_FANCY  or  ~FEATURE_BRCTL_SHOW
+C928:~UNICODE_USING_LOCALE  or  UNICODE_SUPPORT
+C929:~UNICODE_USING_LOCALE  or  LOCALE_SUPPORT
+C930:~FEATURE_CHECK_UNICODE_IN_ENV  or  UNICODE_SUPPORT
+C931:~FEATURE_CHECK_UNICODE_IN_ENV  or  ~UNICODE_USING_LOCALE
+C932:~UNICODE_BIDI_SUPPORT  or  UNICODE_SUPPORT
+C933:~UNICODE_BIDI_SUPPORT  or  ~UNICODE_USING_LOCALE
+C934:FEATURE_SYSLOG  or  ~NAMEIF  or  ~PLATFORM_LINUX
+C935:FEATURE_SYSLOG  or  ~ZCIP  or  ~PLATFORM_LINUX
+C936:FEATURE_SYSLOG  or  ~FEATURE_MOUNT_NFS  or  ~MOUNT
+C937:FEATURE_SYSLOG  or  ~DEVFSD  or  ~PLATFORM_LINUX
+C938:FEATURE_SYSLOG  or  ~SULOGIN
+C939:FEATURE_SYSLOG  or  ~PASSWD
+C940:FEATURE_SYSLOG  or  ~CROND
+C941:FEATURE_SYSLOG  or  ~FAKEIDENTD
+C942:FEATURE_SYSLOG  or  ~LOGIN
+C943:FEATURE_SYSLOG  or  ~INIT
+C944:FEATURE_SYSLOG  or  ~INETD
+C945:FEATURE_SYSLOG  or  ~LOGGER
+C946:FEATURE_SYSLOG  or  ~GETTY
+C947:FEATURE_SYSLOG  or  ~SU
+C948:FEATURE_SYSLOG  or  ~TELNETD
+C949:~FEATURE_SYSLOG  or  SULOGIN  or  PASSWD  or  CROND  or  FAKEIDENTD  or  LOGIN  or  INIT  or  INETD  or  LOGGER  or  GETTY  or  SU  or  TELNETD  or  NAMEIF  or  ZCIP  or  FEATURE_MOUNT_NFS  or  DEVFSD
+C950:~FEATURE_SYSLOG  or  SULOGIN  or  PASSWD  or  CROND  or  FAKEIDENTD  or  LOGIN  or  INIT  or  INETD  or  LOGGER  or  GETTY  or  SU  or  TELNETD  or  NAMEIF  or  ZCIP  or  MOUNT  or  DEVFSD
+C951:~FEATURE_SYSLOG  or  SULOGIN  or  PASSWD  or  CROND  or  FAKEIDENTD  or  LOGIN  or  INIT  or  INETD  or  LOGGER  or  GETTY  or  SU  or  TELNETD  or  PLATFORM_LINUX  or  FEATURE_MOUNT_NFS
+C952:~FEATURE_SYSLOG  or  SULOGIN  or  PASSWD  or  CROND  or  FAKEIDENTD  or  LOGIN  or  INIT  or  INETD  or  LOGGER  or  GETTY  or  SU  or  TELNETD  or  PLATFORM_LINUX  or  MOUNT
+C953:FEATURE_HAVE_RPC  or  ~FEATURE_MOUNT_NFS  or  ~MOUNT
+C954:FEATURE_HAVE_RPC  or  ~FEATURE_INETD_RPC  or  ~INETD
+C955:~FEATURE_HAVE_RPC  or  FEATURE_MOUNT_NFS  or  FEATURE_INETD_RPC
+C956:~FEATURE_HAVE_RPC  or  FEATURE_MOUNT_NFS  or  INETD
+C957:~FEATURE_HAVE_RPC  or  MOUNT  or  FEATURE_INETD_RPC
+C958:~FEATURE_HAVE_RPC  or  MOUNT  or  INETD
+C959:~STATIC  or  ~PIE
+C960:~BUILD_LIBBUSYBOX  or  ~FEATURE_PREFER_APPLETS
+C961:~BUILD_LIBBUSYBOX  or  ~PIE
+C962:~BUILD_LIBBUSYBOX  or  ~STATIC
+C963:FEATURE_INSTALLER  or  FEATURE_SH_STANDALONE  or  FEATURE_PREFER_APPLETS  or  ~INSTALL_APPLET_DONT
+C964:MORE  or  TOP  or  POWERTOP  or  ~FEATURE_USE_TERMIOS
+C965:GZIP  or  ~FEATURE_GZIP_LONG_OPTIONS
+C966:LONG_OPTS  or  ~FEATURE_GZIP_LONG_OPTIONS
+C967:FEATURE_SEAMLESS_Z  or  FEATURE_SEAMLESS_GZ  or  FEATURE_SEAMLESS_BZ2  or  FEATURE_SEAMLESS_LZMA  or  FEATURE_SEAMLESS_XZ  or  ~FEATURE_TAR_AUTODETECT
+C968:TAR  or  ~FEATURE_TAR_AUTODETECT
+C969:TAR  or  ~FEATURE_TAR_LONG_OPTIONS
+C970:LONG_OPTS  or  ~FEATURE_TAR_LONG_OPTIONS
+C971:~FEATURE_TAR_SELINUX  or  TAR
+C972:~FEATURE_TAR_SELINUX  or  SELINUX
+C973:CHOWN  or  ~FEATURE_CHOWN_LONG_OPTIONS
+C974:LONG_OPTS  or  ~FEATURE_CHOWN_LONG_OPTIONS
+C975:CP  or  ~FEATURE_CP_LONG_OPTIONS
+C976:LONG_OPTS  or  ~FEATURE_CP_LONG_OPTIONS
+C977:~DOS2UNIX  or  UNIX2DOS
+C978:~UNIX2DOS  or  DOS2UNIX
+C979:ENV  or  ~FEATURE_ENV_LONG_OPTIONS
+C980:LONG_OPTS  or  ~FEATURE_ENV_LONG_OPTIONS
+C981:EXPAND  or  ~FEATURE_EXPAND_LONG_OPTIONS
+C982:LONG_OPTS  or  ~FEATURE_EXPAND_LONG_OPTIONS
+C983:INSTALL  or  ~FEATURE_INSTALL_LONG_OPTIONS
+C984:LONG_OPTS  or  ~FEATURE_INSTALL_LONG_OPTIONS
+C985:LS  or  ~FEATURE_LS_COLOR
+C986:LONG_OPTS  or  ~FEATURE_LS_COLOR
+C987:MKDIR  or  ~FEATURE_MKDIR_LONG_OPTIONS
+C988:LONG_OPTS  or  ~FEATURE_MKDIR_LONG_OPTIONS
+C989:MV  or  ~FEATURE_MV_LONG_OPTIONS
+C990:LONG_OPTS  or  ~FEATURE_MV_LONG_OPTIONS
+C991:RMDIR  or  ~FEATURE_RMDIR_LONG_OPTIONS
+C992:LONG_OPTS  or  ~FEATURE_RMDIR_LONG_OPTIONS
+C993:UNEXPAND  or  ~FEATURE_UNEXPAND_LONG_OPTIONS
+C994:LONG_OPTS  or  ~FEATURE_UNEXPAND_LONG_OPTIONS
+C995:FEATURE_UTMP  or  ~WHO
+C996:CP  or  MV  or  ~FEATURE_PRESERVE_HARDLINKS
+C997:LS  or  MORE  or  TELNET  or  ~FEATURE_AUTOWIDTH
+C998:DF  or  DU  or  LS  or  ~FEATURE_HUMAN_READABLE
+C999:MD5SUM  or  SHA1SUM  or  SHA256SUM  or  SHA512SUM  or  ~FEATURE_MD5_SHA1_SUM_CHECK
+C1000:SETCONSOLE  or  ~FEATURE_SETCONSOLE_LONG_OPTIONS
+C1001:LONG_OPTS  or  ~FEATURE_SETCONSOLE_LONG_OPTIONS
+C1002:LOADFONT  or  SETFONT  or  ~FEATURE_LOADFONT_PSF2
+C1003:LOADFONT  or  SETFONT  or  ~FEATURE_LOADFONT_RAW
+C1004:RUN_PARTS  or  ~FEATURE_RUN_PARTS_LONG_OPTIONS
+C1005:LONG_OPTS  or  ~FEATURE_RUN_PARTS_LONG_OPTIONS
+C1006:START_STOP_DAEMON  or  ~FEATURE_START_STOP_DAEMON_LONG_OPTIONS
+C1007:LONG_OPTS  or  ~FEATURE_START_STOP_DAEMON_LONG_OPTIONS
+C1008:DIFF  or  ~FEATURE_DIFF_LONG_OPTIONS
+C1009:LONG_OPTS  or  ~FEATURE_DIFF_LONG_OPTIONS
+C1010:FIND  or  ~FEATURE_FIND_DELETE
+C1011:FEATURE_FIND_DEPTH  or  ~FEATURE_FIND_DELETE
+C1012:~FEATURE_FIND_CONTEXT  or  FIND
+C1013:~FEATURE_FIND_CONTEXT  or  SELINUX
+C1014:HALT  or  ~FEATURE_CALL_TELINIT
+C1015:~INIT  or  ~FEATURE_CALL_TELINIT
+C1016:USE_BB_PWD_GRP  or  ~USE_BB_SHADOW
+C1017:FEATURE_SHADOWPASSWDS  or  ~USE_BB_SHADOW
+C1018:ADDUSER  or  ~FEATURE_ADDUSER_LONG_OPTIONS
+C1019:LONG_OPTS  or  ~FEATURE_ADDUSER_LONG_OPTIONS
+C1020:ADDGROUP  or  ~FEATURE_ADDGROUP_LONG_OPTIONS
+C1021:LONG_OPTS  or  ~FEATURE_ADDGROUP_LONG_OPTIONS
+C1022:~INSMOD  or  PLATFORM_LINUX
+C1023:~INSMOD  or  ~MODPROBE_SMALL
+C1024:~RMMOD  or  PLATFORM_LINUX
+C1025:~RMMOD  or  ~MODPROBE_SMALL
+C1026:~LSMOD  or  PLATFORM_LINUX
+C1027:~LSMOD  or  ~MODPROBE_SMALL
+C1028:~MODPROBE  or  PLATFORM_LINUX
+C1029:~MODPROBE  or  ~MODPROBE_SMALL
+C1030:~DEPMOD  or  PLATFORM_LINUX
+C1031:~DEPMOD  or  ~MODPROBE_SMALL
+C1032:~FEATURE_2_4_MODULES  or  INSMOD  or  RMMOD  or  LSMOD
+C1033:~FEATURE_2_4_MODULES  or  PLATFORM_LINUX
+C1034:~FEATURE_INSMOD_TRY_MMAP  or  INSMOD  or  MODPROBE_SMALL
+C1035:~FEATURE_INSMOD_TRY_MMAP  or  PLATFORM_LINUX
+C1036:~FEATURE_INSMOD_VERSION_CHECKING  or  INSMOD  or  MODPROBE
+C1037:~FEATURE_INSMOD_VERSION_CHECKING  or  PLATFORM_LINUX
+C1038:~FEATURE_INSMOD_VERSION_CHECKING  or  FEATURE_2_4_MODULES
+C1039:~FEATURE_INSMOD_KSYMOOPS_SYMBOLS  or  INSMOD  or  MODPROBE
+C1040:~FEATURE_INSMOD_KSYMOOPS_SYMBOLS  or  PLATFORM_LINUX
+C1041:~FEATURE_INSMOD_KSYMOOPS_SYMBOLS  or  FEATURE_2_4_MODULES
+C1042:~FEATURE_INSMOD_LOADINKMEM  or  INSMOD  or  MODPROBE
+C1043:~FEATURE_INSMOD_LOADINKMEM  or  PLATFORM_LINUX
+C1044:~FEATURE_INSMOD_LOADINKMEM  or  FEATURE_2_4_MODULES
+C1045:~FEATURE_INSMOD_LOAD_MAP  or  PLATFORM_LINUX
+C1046:~FEATURE_INSMOD_LOAD_MAP  or  FEATURE_2_4_MODULES
+C1047:~FEATURE_INSMOD_LOAD_MAP  or  INSMOD
+C1048:LSMOD  or  FEATURE_2_4_MODULES  or  ~FEATURE_CHECK_TAINTED_MODULE
+C1049:PLATFORM_LINUX  or  ~FEATURE_CHECK_TAINTED_MODULE
+C1050:~MODPROBE_SMALL  or  ~FEATURE_CHECK_TAINTED_MODULE
+C1051:DEPMOD  or  MODPROBE  or  ~FEATURE_MODUTILS_ALIAS
+C1052:PLATFORM_LINUX  or  ~FEATURE_MODUTILS_ALIAS
+C1053:DEPMOD  or  MODPROBE  or  ~FEATURE_MODUTILS_SYMBOLS
+C1054:PLATFORM_LINUX  or  ~FEATURE_MODUTILS_SYMBOLS
+C1055:FDISK  or  ~FDISK_SUPPORT_LARGE_DISKS  or  LFS
+C1056:FDISK  or  FDISK_SUPPORT_LARGE_DISKS  or  ~LFS
+C1057:FSCK_MINIX  or  MKFS_MINIX  or  ~FEATURE_MINIX2
+C1058:HWCLOCK  or  ~FEATURE_HWCLOCK_LONG_OPTIONS
+C1059:LONG_OPTS  or  ~FEATURE_HWCLOCK_LONG_OPTIONS
+C1060:MOUNT  or  FEATURE_MOUNT_FAKE  or  ~FEATURE_MTAB_SUPPORT  or  ~UMOUNT
+C1061:MOUNT  or  ~FEATURE_MOUNT_FAKE  or  UMOUNT
+C1062:MOUNT  or  ~FEATURE_MOUNT_FAKE  or  FEATURE_MTAB_SUPPORT
+C1063:MOUNT  or  UMOUNT  or  ~FEATURE_MOUNT_LOOP
+C1064:MOUNT  or  UMOUNT  or  ~FEATURE_MTAB_SUPPORT
+C1065:VOLUMEID  or  ~FEATURE_MOUNT_LABEL  or  ~MOUNT
+C1066:VOLUMEID  or  ~FINDFS  or  ~PLATFORM_LINUX
+C1067:VOLUMEID  or  ~BLKID  or  ~PLATFORM_LINUX
+C1068:~VOLUMEID  or  FEATURE_MOUNT_LABEL  or  FINDFS  or  BLKID
+C1069:~VOLUMEID  or  FEATURE_MOUNT_LABEL  or  PLATFORM_LINUX
+C1070:~VOLUMEID  or  MOUNT  or  FINDFS  or  BLKID
+C1071:~VOLUMEID  or  MOUNT  or  PLATFORM_LINUX
+C1072:VOLUMEID  or  ~FEATURE_VOLUMEID_EXT
+C1073:VOLUMEID  or  ~FEATURE_VOLUMEID_BTRFS
+C1074:VOLUMEID  or  ~FEATURE_VOLUMEID_REISERFS
+C1075:VOLUMEID  or  ~FEATURE_VOLUMEID_FAT
+C1076:VOLUMEID  or  ~FEATURE_VOLUMEID_HFS
+C1077:VOLUMEID  or  ~FEATURE_VOLUMEID_JFS
+C1078:VOLUMEID  or  ~FEATURE_VOLUMEID_XFS
+C1079:VOLUMEID  or  ~FEATURE_VOLUMEID_NTFS
+C1080:VOLUMEID  or  ~FEATURE_VOLUMEID_ISO9660
+C1081:VOLUMEID  or  ~FEATURE_VOLUMEID_UDF
+C1082:VOLUMEID  or  ~FEATURE_VOLUMEID_LUKS
+C1083:VOLUMEID  or  ~FEATURE_VOLUMEID_LINUXSWAP
+C1084:VOLUMEID  or  ~FEATURE_VOLUMEID_CRAMFS
+C1085:VOLUMEID  or  ~FEATURE_VOLUMEID_ROMFS
+C1086:VOLUMEID  or  ~FEATURE_VOLUMEID_SYSV
+C1087:VOLUMEID  or  ~FEATURE_VOLUMEID_OCFS2
+C1088:VOLUMEID  or  ~FEATURE_VOLUMEID_LINUXRAID
+C1089:FEATURE_WTMP  or  ~LAST
+C1090:LFS  or  ~READAHEAD
+C1091:PLATFORM_LINUX  or  ~READAHEAD
+C1092:FEATURE_IPV6  or  ~FEATURE_PREFER_IPV4_ADDRESS
+C1093:FTPGET  or  FTPPUT  or  ~FEATURE_FTPGETPUT_LONG_OPTIONS
+C1094:LONG_OPTS  or  ~FEATURE_FTPGETPUT_LONG_OPTIONS
+C1095:~FEATURE_IFUPDOWN_IFCONFIG_BUILTIN  or  IFUPDOWN
+C1096:~FEATURE_IFUPDOWN_IFCONFIG_BUILTIN  or  ~FEATURE_IFUPDOWN_IP
+C1097:IFUPDOWN  or  ~FEATURE_IFUPDOWN_IPV6
+C1098:FEATURE_IPV6  or  ~FEATURE_IFUPDOWN_IPV6
+C1099:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_ADDRESS  or  IPADDR
+C1100:~IPADDR  or  FEATURE_IP_SHORT_FORMS
+C1101:~IPADDR  or  FEATURE_IP_ADDRESS
+C1102:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_LINK  or  IPLINK
+C1103:~IPLINK  or  FEATURE_IP_SHORT_FORMS
+C1104:~IPLINK  or  FEATURE_IP_LINK
+C1105:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_ROUTE  or  IPROUTE
+C1106:~IPROUTE  or  FEATURE_IP_SHORT_FORMS
+C1107:~IPROUTE  or  FEATURE_IP_ROUTE
+C1108:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_TUNNEL  or  IPTUNNEL
+C1109:~IPTUNNEL  or  FEATURE_IP_SHORT_FORMS
+C1110:~IPTUNNEL  or  FEATURE_IP_TUNNEL
+C1111:~FEATURE_IP_SHORT_FORMS  or  ~FEATURE_IP_RULE  or  IPRULE
+C1112:~IPRULE  or  FEATURE_IP_SHORT_FORMS
+C1113:~IPRULE  or  FEATURE_IP_RULE
+C1114:IPCALC  or  ~FEATURE_IPCALC_LONG_OPTIONS
+C1115:LONG_OPTS  or  ~FEATURE_IPCALC_LONG_OPTIONS
+C1116:FEATURE_IPV6  or  ~PING6
+C1117:PING  or  ~PING6
+C1118:TFTP  or  ~FEATURE_TFTP_PROGRESS_BAR
+C1119:FEATURE_TFTP_BLOCKSIZE  or  ~FEATURE_TFTP_PROGRESS_BAR
+C1120:FEATURE_IPV6  or  ~TRACEROUTE6
+C1121:TRACEROUTE  or  ~TRACEROUTE6
+C1122:IFUPDOWN  or  ~IFUPDOWN_UDHCPC_CMD_OPTIONS
+C1123:UDHCPC  or  ~IFUPDOWN_UDHCPC_CMD_OPTIONS
+C1124:WGET  or  ~FEATURE_WGET_LONG_OPTIONS
+C1125:LONG_OPTS  or  ~FEATURE_WGET_LONG_OPTIONS
+C1126:PS  or  ~FEATURE_PS_TIME
+C1127:DESKTOP  or  ~FEATURE_PS_TIME
+C1128:PLATFORM_LINUX  or  ~FEATURE_PS_TIME
+C1129:PS  or  ~FEATURE_PS_ADDITIONAL_COLUMNS
+C1130:DESKTOP  or  ~FEATURE_PS_ADDITIONAL_COLUMNS
+C1131:FEATURE_PS_TIME  or  ~FEATURE_PS_UNUSUAL_SYSTEMS
+C1132:SELINUX  or  ~CHCON
+C1133:SELINUX  or  ~FEATURE_CHCON_LONG_OPTIONS
+C1134:CHCON  or  ~FEATURE_CHCON_LONG_OPTIONS
+C1135:LONG_OPTS  or  ~FEATURE_CHCON_LONG_OPTIONS
+C1136:SELINUX  or  ~GETENFORCE
+C1137:SELINUX  or  ~GETSEBOOL
+C1138:SELINUX  or  ~LOAD_POLICY
+C1139:SELINUX  or  ~MATCHPATHCON
+C1140:SELINUX  or  ~RESTORECON
+C1141:SELINUX  or  ~RUNCON
+C1142:SELINUX  or  ~FEATURE_RUNCON_LONG_OPTIONS
+C1143:RUNCON  or  ~FEATURE_RUNCON_LONG_OPTIONS
+C1144:LONG_OPTS  or  ~FEATURE_RUNCON_LONG_OPTIONS
+C1145:SELINUX  or  ~SELINUXENABLED
+C1146:SELINUX  or  ~SETENFORCE
+C1147:SELINUX  or  ~SETFILES
+C1148:SELINUX  or  ~SETSEBOOL
+C1149:SELINUX  or  ~SESTATUS
+C1150:~NOMMU  or  ~ASH
+C1151:HUSH_INTERACTIVE  or  ~HUSH_SAVEHISTORY
+C1152:FEATURE_EDITING_SAVEHISTORY  or  ~HUSH_SAVEHISTORY
+C1153:~FEATURE_SH_IS_ASH  or  ASH
+C1154:~FEATURE_SH_IS_ASH  or  ~NOMMU
+C1155:HUSH  or  ~FEATURE_SH_IS_HUSH
+C1156:~FEATURE_BASH_IS_ASH  or  ASH
+C1157:~FEATURE_BASH_IS_ASH  or  ~NOMMU
+C1158:HUSH  or  ~FEATURE_BASH_IS_HUSH
+C1159:ASH  or  HUSH  or  ~SH_MATH_SUPPORT
+C1160:HUSH  or  ASH  or  ~FEATURE_SH_EXTRA_QUIET
+C1161:~FEATURE_SH_STANDALONE  or  HUSH  or  ASH
+C1162:~FEATURE_SH_STANDALONE  or  FEATURE_PREFER_APPLETS
+C1163:~FEATURE_SH_NOFORK  or  HUSH  or  ASH
+C1164:~FEATURE_SH_NOFORK  or  FEATURE_PREFER_APPLETS
+</constraints>
+</feature_model>
+
+    `;
+
+onMounted(async () => {
+    loading.value = true;
+    await getFile();
+    console.log('file', file);
+    loading.value = false;
+    showTutorial.value = !localStorage.fileDetailTutorialCompleted;
+    //await this.fetchFeatureModelOfFamily(this.family.id)
+});
+
+/*watch: {
+        selectedRightFM: function (newValue) {
+            console.log(newValue);
+        },
+    },*/
+const isRightFmSelected = computed(() => {
+    return this.selectedRightFM !== -1;
+});
+const getMyFM = computed(() => {
+    return fileStore.myConfirmedFeatureModels;
+});
+const getStati = computed(() => {
+    return {
+        success: {
+            percentage:
+                (itemsAnalysis.filter((obj) => obj.status === 1).length /
+                    itemsAnalysis.length) *
+                100,
+            absolute: itemsAnalysis.filter((obj) => obj.status === 1).length,
+        },
+        error: {
+            percentage:
+                (itemsAnalysis.filter((obj) => obj.status === -1).length /
+                    itemsAnalysis.length) *
+                100,
+            absolute: itemsAnalysis.filter((obj) => obj.status === -1).length,
+        },
+        progress: {
+            percentage:
+                (itemsAnalysis.filter((obj) => obj.status === 0).length /
+                    itemsAnalysis.length) *
+                100,
+            absolute: itemsAnalysis.filter((obj) => obj.status === 0).length,
+        },
+        amount: itemsAnalysis.length,
+    };
+});
+
+async function getFile() {
+    const id = route.params.id;
+    await api
+        .get(`${API_URL}files/uploaded/confirmed/${id}/`)
+        .then((response) => {
+            file = response.data;
+        })
+        .catch((error) => {
+            console.log('getfile', error);
+        });
+}
+function deleteItem() {
+    this.dialogDelete = true;
+}
+function closeDelete() {
+    this.dialogDelete = false;
+}
+async function deleteItemConfirm() {
+    this.removeLoading = true;
+    await fileStore.deleteFeatureModel(this.file.id);
+    await fileStore.fetchConfirmedFeatureModels;
+    this.removeLoading = false;
+    await router.push('/');
+}
+function showArtifactDialog(item) {
+    this.selectedArtifact = item;
+    this.dialogArtifact = true;
+}
+async function compare() {
+    this.shouldCompare = true;
+    this.loadingComparableFM = true;
+    await this.$store.dispatch('fetchFeatureModels');
+    this.loadingComparableFM = false;
+}
+/*async fetchFeatureModelOfFamily(value) {
+  await api
+    .get(`${API_URL}files/uploaded/confirmed/?family=${value}`)
+    .then((response) => {
+      this.files = response.data
+      this.loadingTable = false
+    })
+},*/
+</script>
+
+<style>
+.pointer-on-hover:hover {
+    cursor: pointer;
+}
+</style>

From d1e0fee8f5741db21226154cf0662adde3e38416 Mon Sep 17 00:00:00 2001
From: lukharsch <lukasharsch@web.de>
Date: Fri, 21 Apr 2023 15:46:55 +0200
Subject: [PATCH 6/8] Added toggle buttons for artifacts table

---
 frontendVue3/src/views/FileDetail.vue | 199 ++++++++++++++++++++------
 1 file changed, 156 insertions(+), 43 deletions(-)

diff --git a/frontendVue3/src/views/FileDetail.vue b/frontendVue3/src/views/FileDetail.vue
index ceeccf7a..4b381213 100644
--- a/frontendVue3/src/views/FileDetail.vue
+++ b/frontendVue3/src/views/FileDetail.vue
@@ -411,36 +411,96 @@
             fullscreen
             transition="dialog-bottom-transition"
         >
-            <v-toolbar dark>
-                <v-icon class="mr-2">mdi-file-compare</v-icon>
-                <v-toolbar-title
-                    >View and compare Feature Model artifacts:
-                    <span class="font-weight-bold">{{
-                        selectedArtifact.title
-                    }}</span></v-toolbar-title
-                >
+            <v-toolbar dark color="primary">
+                <!--                <v-icon icon="mdi-file-compare" class="mx-2"></v-icon>-->
+                <v-toolbar-title>
+                    View and compare Feature Model artifacts:
+                    <span class="font-weight-bold">
+                        {{ selectedArtifact.title }}
+                    </span>
+                </v-toolbar-title>
                 <v-spacer></v-spacer>
                 <v-toolbar-items>
-                    <v-btn icon dark @click="dialogArtifact = false">
-                        <v-icon>mdi-close</v-icon>
+                    <v-btn
+                        icon="mdi-close"
+                        dark
+                        @click="dialogArtifact = false"
+                    >
                     </v-btn>
                 </v-toolbar-items>
             </v-toolbar>
             <v-card>
                 <v-card-text>
+                    <v-row>
+                        <v-col cols="12" class="pb-0">
+                            <div class="text-subtitle-2">Toggle Headers</div>
+                        </v-col>
+                        <v-col cols="12" class="d-flex">
+                            <v-btn-toggle
+                                v-model="selectedCols"
+                                multiple
+                                density="compact"
+                                rounded="xl"
+                            >
+                                <v-btn
+                                    v-for="(
+                                        item, index
+                                    ) in headerCsvArtifactFull"
+                                    :key="index"
+                                    size="small"
+                                    variant="outlined"
+                                    :value="item.key"
+                                    :prepend-icon="
+                                        selectedCols.includes(item.key)
+                                            ? 'mdi-check'
+                                            : null
+                                    "
+                                >
+                                    {{ item.title }}
+                                </v-btn>
+                            </v-btn-toggle>
+                            <v-spacer></v-spacer>
+                            <v-btn
+                                :disabled="selectedCols.length === 0"
+                                variant="tonal"
+                                value="collapse"
+                                rounded="xl"
+                                @click="selectedCols = []"
+                            >
+                                Collapse all
+                            </v-btn>
+                            <v-btn
+                                :disabled="
+                                    selectedCols.length ===
+                                    headerCsvArtifactFull.length
+                                "
+                                variant="tonal"
+                                value="collapse"
+                                rounded="xl"
+                                class="ml-2"
+                                @click="
+                                    selectedCols = headerCsvArtifactFull.map(
+                                        (el) => el.key
+                                    )
+                                "
+                            >
+                                Expand all
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                    <v-divider class="mt-4"></v-divider>
                     <v-row class="ma-1">
                         <v-col
                             cols="12"
-                            :md="isRightFmSelected ? 6 : 8"
-                            :lg="isRightFmSelected ? 6 : 9"
+                            :md="isRightFmSelected ? 6 : 12"
+                            :lg="isRightFmSelected ? 6 : 12"
                             class="pa-2"
                         >
                             <h6 class="text-h6">
                                 Feature Model: {{ file.label }}
                             </h6>
-
                             <v-data-table
-                                v-if="selectedArtifact.title === 'CSV'"
+                                v-if="selectedArtifact.value.title === 'CSV'"
                                 :headers="headerCsvArtifact"
                                 :items="itemsCsvArtifact"
                                 :items-per-page="10"
@@ -457,12 +517,25 @@
                                 >
                                 </textarea>
                             </div>
-                            <v-btn color="success">
-                                <v-icon left>mdi-download</v-icon>
-                                Download Artifact
-                            </v-btn>
+                            <div
+                                class="d-flex justify-space-between"
+                                style="width: 100%"
+                            >
+                                <v-btn
+                                    color="success"
+                                    prepend-icon="mdi-download"
+                                >
+                                    Download Artifact
+                                </v-btn>
+                                <v-btn
+                                    color="primary"
+                                    prepend-icon="mdi-compare-horizontal"
+                                >
+                                    Compare
+                                </v-btn>
+                            </div>
                         </v-col>
-                        <v-col
+                        <!--                        <v-col
                             v-if="!isRightFmSelected"
                             cols="12"
                             md="4"
@@ -536,9 +609,9 @@
                                     </v-list-item-group>
                                 </v-list>
                             </div>
-                        </v-col>
+                        </v-col>-->
                         <v-col
-                            v-else
+                            v-if="isRightFmSelected"
                             cols="12"
                             md="6"
                             lg="6"
@@ -598,7 +671,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import api from '@/services/api.service';
 import { useFileStore } from '@/store/file';
 import { useRouter, useRoute } from 'vue-router';
@@ -698,18 +771,30 @@ const artifacts = [
         subtitle: 'Generated from analysis: complex analysis',
     },
 ];
-const headerCsvArtifact = [
-    { text: 'Input File', value: 'input_file' },
-    { text: 'Input Hash', value: 'input_hash' },
-    { text: 'SVO', value: 'svo' },
-    { text: 'DVO', value: 'dvo' },
-    { text: 'DVO Time', value: 'dvo_time' },
-    { text: 'BDD Compiler', value: 'bdd_compiler' },
-    { text: 'BDD Bootstrap', value: 'bdd_bootstrap' },
-    { text: 'BDD Compile', value: 'bdd_compile' },
-    { text: 'BDD Timeout', value: 'bdd_timeout' },
-    { text: 'BDD Size', value: 'bdd_size' },
+const headerCsvArtifactFull = [
+    { title: 'Input File', key: 'input_file' },
+    { title: 'Input Hash', key: 'input_hash' },
+    { title: 'SVO', key: 'svo' },
+    { title: 'DVO', key: 'dvo' },
+    { title: 'DVO Time', key: 'dvo_time' },
+    { title: 'BDD Compiler', key: 'bdd_compiler' },
+    { title: 'BDD Bootstrap', key: 'bdd_bootstrap' },
+    { title: 'BDD Compile', key: 'bdd_compile' },
+    { title: 'BDD Timeout', key: 'bdd_timeout' },
+    { title: 'BDD Size', key: 'bdd_size' },
 ];
+const headerCsvArtifact = ref([
+    { title: 'Input File', key: 'input_file' },
+    { title: 'Input Hash', key: 'input_hash' },
+    { title: 'SVO', key: 'svo' },
+    { title: 'DVO', key: 'dvo' },
+    { title: 'DVO Time', key: 'dvo_time' },
+    { title: 'BDD Compiler', key: 'bdd_compiler' },
+    { title: 'BDD Bootstrap', key: 'bdd_bootstrap' },
+    { title: 'BDD Compile', key: 'bdd_compile' },
+    { title: 'BDD Timeout', key: 'bdd_timeout' },
+    { title: 'BDD Size', key: 'bdd_size' },
+]);
 const itemsCsvArtifact = [
     {
         input_file: 'busybox.dimacs',
@@ -3102,6 +3187,34 @@ C1164:~FEATURE_SH_NOFORK  or  FEATURE_PREFER_APPLETS
 
     `;
 
+const selectedCols = ref([
+    'input_file',
+    'input_hash',
+    'svo',
+    'dvo',
+    'dvo_time',
+    'bdd_compiler',
+    'bdd_bootstrap',
+    'bdd_compile',
+    'bdd_timeout',
+    'bdd_size',
+]);
+
+watch(
+    () => selectedCols.value,
+    (newValue) => {
+        console.log('moin');
+        /*console.log(
+            headerCsvArtifactFull.filter(
+                (el) => newValue.indexOf(el.key) !== -1
+            )
+        );*/
+        headerCsvArtifact.value = headerCsvArtifactFull.filter(
+            (el) => newValue.indexOf(el.key) !== -1
+        );
+    }
+);
+
 onMounted(async () => {
     loading.value = true;
     await getFile();
@@ -3117,7 +3230,7 @@ onMounted(async () => {
         },
     },*/
 const isRightFmSelected = computed(() => {
-    return this.selectedRightFM !== -1;
+    return selectedRightFM.value !== -1;
 });
 const getMyFM = computed(() => {
     return fileStore.myConfirmedFeatureModels;
@@ -3167,21 +3280,21 @@ function closeDelete() {
     this.dialogDelete = false;
 }
 async function deleteItemConfirm() {
-    this.removeLoading = true;
-    await fileStore.deleteFeatureModel(this.file.id);
+    removeLoading.value = true;
+    await fileStore.deleteFeatureModel(file.value.id);
     await fileStore.fetchConfirmedFeatureModels;
-    this.removeLoading = false;
+    removeLoading.value = false;
     await router.push('/');
 }
 function showArtifactDialog(item) {
-    this.selectedArtifact = item;
-    this.dialogArtifact = true;
+    selectedArtifact.value = item;
+    dialogArtifact.value = true;
 }
 async function compare() {
-    this.shouldCompare = true;
-    this.loadingComparableFM = true;
-    await this.$store.dispatch('fetchFeatureModels');
-    this.loadingComparableFM = false;
+    shouldCompare.value = true;
+    loadingComparableFM.value = true;
+    fileStore.fetchConfirmedFeatureModels();
+    loadingComparableFM.value = false;
 }
 /*async fetchFeatureModelOfFamily(value) {
   await api

From e57e95ee5913d11d72f9779dd9bf82ae764fa8de Mon Sep 17 00:00:00 2001
From: lukharsch <lukasharsch@web.de>
Date: Fri, 26 May 2023 16:36:37 +0200
Subject: [PATCH 7/8] Begun adding editor in Vue 3

---
 frontendVue3/index.html                       |   15 +-
 frontendVue3/package-lock.json                | 1011 ++++++++++++++++-
 frontendVue3/package.json                     |   10 +-
 frontendVue3/src/App.vue                      |    4 +-
 .../src/classes/CollaborationManager.js       |  343 ++++++
 frontendVue3/src/classes/Commands/Command.js  |    4 +
 .../src/classes/Commands/CommandFactory.js    |   38 +
 .../src/classes/Commands/CommandManager.js    |  120 ++
 .../Commands/Constraints/AddCommand.js        |   27 +
 .../Commands/Constraints/ConstraintCommand.js |   13 +
 .../Commands/Constraints/DeleteCommand.js     |   26 +
 .../Commands/Constraints/EditCommand.js       |   28 +
 .../Commands/FeatureModel/AddCommand.js       |   35 +
 .../Commands/FeatureModel/EditCommand.js      |   49 +
 .../FeatureModel/FeatureNodeCommand.js        |   16 +
 .../FeatureModel/NewEmptyModelCommand.js      |   54 +
 .../Commands/FeatureModel/SwapCommand.js      |   47 +
 frontendVue3/src/classes/Constraint.js        |   53 +
 .../src/classes/Constraint/Conjunction.js     |    7 +
 .../src/classes/Constraint/ConstraintItem.js  |   32 +
 .../src/classes/Constraint/Disjunction.js     |    7 +
 .../Constraint/FeatureNodeConstraintItem.js   |   49 +
 .../classes/Constraint/GroupConstraintItem.js |   53 +
 .../src/classes/Constraint/Implication.js     |   43 +
 .../src/classes/Constraint/Negation.js        |   40 +
 frontendVue3/src/classes/FeatureNode.js       |  356 ++++++
 frontendVue3/src/classes/PseudoNode.js        |   19 +
 frontendVue3/src/classes/constants.js         |   73 ++
 .../CollaborationContinueEditingDialog.vue    |   34 +
 .../components/CollaborationNameDialog.vue    |   61 +
 .../src/components/CollaborationToolbar.vue   |  334 ++++++
 .../components/ConstraintAddEditDialog.vue    |  229 ++++
 frontendVue3/src/components/Constraints.vue   |  251 ++++
 .../FeatureModel/FeatureModelInformation.vue  |   53 +
 .../FeatureModel/FeatureModelTree.vue         |  588 ++++++++++
 .../FeatureModelTreeAddDialog.vue             |  120 ++
 .../FeatureModelTreeContextMenu.vue           |  179 +++
 .../FeatureModelTreeEditDialog.vue            |  189 +++
 .../FeatureModel/FeatureModelTreeToolbar.vue  |  396 +++++++
 frontendVue3/src/router/index.js              |    7 +
 frontendVue3/src/views/FeatureModel.vue       |  245 ++++
 41 files changed, 5251 insertions(+), 7 deletions(-)
 create mode 100644 frontendVue3/src/classes/CollaborationManager.js
 create mode 100644 frontendVue3/src/classes/Commands/Command.js
 create mode 100644 frontendVue3/src/classes/Commands/CommandFactory.js
 create mode 100644 frontendVue3/src/classes/Commands/CommandManager.js
 create mode 100644 frontendVue3/src/classes/Commands/Constraints/AddCommand.js
 create mode 100644 frontendVue3/src/classes/Commands/Constraints/ConstraintCommand.js
 create mode 100644 frontendVue3/src/classes/Commands/Constraints/DeleteCommand.js
 create mode 100644 frontendVue3/src/classes/Commands/Constraints/EditCommand.js
 create mode 100644 frontendVue3/src/classes/Commands/FeatureModel/AddCommand.js
 create mode 100644 frontendVue3/src/classes/Commands/FeatureModel/EditCommand.js
 create mode 100644 frontendVue3/src/classes/Commands/FeatureModel/FeatureNodeCommand.js
 create mode 100644 frontendVue3/src/classes/Commands/FeatureModel/NewEmptyModelCommand.js
 create mode 100644 frontendVue3/src/classes/Commands/FeatureModel/SwapCommand.js
 create mode 100644 frontendVue3/src/classes/Constraint.js
 create mode 100644 frontendVue3/src/classes/Constraint/Conjunction.js
 create mode 100644 frontendVue3/src/classes/Constraint/ConstraintItem.js
 create mode 100644 frontendVue3/src/classes/Constraint/Disjunction.js
 create mode 100644 frontendVue3/src/classes/Constraint/FeatureNodeConstraintItem.js
 create mode 100644 frontendVue3/src/classes/Constraint/GroupConstraintItem.js
 create mode 100644 frontendVue3/src/classes/Constraint/Implication.js
 create mode 100644 frontendVue3/src/classes/Constraint/Negation.js
 create mode 100644 frontendVue3/src/classes/FeatureNode.js
 create mode 100644 frontendVue3/src/classes/PseudoNode.js
 create mode 100644 frontendVue3/src/classes/constants.js
 create mode 100644 frontendVue3/src/components/CollaborationContinueEditingDialog.vue
 create mode 100644 frontendVue3/src/components/CollaborationNameDialog.vue
 create mode 100644 frontendVue3/src/components/CollaborationToolbar.vue
 create mode 100644 frontendVue3/src/components/ConstraintAddEditDialog.vue
 create mode 100644 frontendVue3/src/components/Constraints.vue
 create mode 100644 frontendVue3/src/components/FeatureModel/FeatureModelInformation.vue
 create mode 100644 frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
 create mode 100644 frontendVue3/src/components/FeatureModel/FeatureModelTreeAddDialog.vue
 create mode 100644 frontendVue3/src/components/FeatureModel/FeatureModelTreeContextMenu.vue
 create mode 100644 frontendVue3/src/components/FeatureModel/FeatureModelTreeEditDialog.vue
 create mode 100644 frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
 create mode 100644 frontendVue3/src/views/FeatureModel.vue

diff --git a/frontendVue3/index.html b/frontendVue3/index.html
index 0b4e17cc..ae8e49c2 100644
--- a/frontendVue3/index.html
+++ b/frontendVue3/index.html
@@ -2,10 +2,17 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Welcome to Vuetify 3</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="description" content="A web service for sharing feature model instances and collaborative
+		benchmarking">
+    <meta name="og:description" content="A web service for sharing feature model instances and collaborative
+		benchmarking">
+    <meta name="keywords" content="feature, model, analyse, collaborative, diagram, bdd">
+    <meta name="author" content="Tobias Heß">
+    <title>variability.dev</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
 </head>
 
 <body>
diff --git a/frontendVue3/package-lock.json b/frontendVue3/package-lock.json
index fdb99313..4bb0ec94 100644
--- a/frontendVue3/package-lock.json
+++ b/frontendVue3/package-lock.json
@@ -11,12 +11,20 @@
         "@mdi/font": "7.0.96",
         "axios": "^1.3.4",
         "core-js": "^3.8.3",
+        "d3": "^7.4.4",
+        "d3-flextree": "^2.1.2",
+        "d3-hierarchy": "^3.1.2",
+        "js-levenshtein": "^1.1.6",
+        "peerjs": "^1.4.7",
         "pinia": "^2.0.23",
+        "qrcode.vue": "^3.4.0",
         "roboto-fontface": "*",
+        "unique-names-generator": "^4.7.1",
         "vue": "^3.2.13",
         "vue-router": "^4.0.0",
         "vuetify": "^3.0.0",
-        "webfontloader": "^1.0.0"
+        "webfontloader": "^1.0.0",
+        "xml-beautifier": "^0.5.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.0.3",
@@ -164,6 +172,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.3.17",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/@swc/helpers/-/helpers-0.3.17.tgz",
+      "integrity": "sha512-tb7Iu+oZ+zWJZ3HJqwx8oNwSDIU440hmVMDPhpACWQWnrZHK99Bxs70gT1L2dnr5Hg50ZRWEFkQCAnOVVV0z1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -529,6 +546,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -582,6 +608,422 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "node_modules/d3": {
+      "version": "7.8.4",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3/-/d3-7.8.4.tgz",
+      "integrity": "sha512-q2WHStdhiBtD8DMmhDPyJmXUxr6VWRngKyiJ5EfXMxPw+tqT6BhNjhJZ4w3BHsNm3QoVfZLY8Orq/qPFczwKRA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.3",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-array/-/d3-array-3.2.3.tgz",
+      "integrity": "sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-flextree": {
+      "version": "2.1.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-flextree/-/d3-flextree-2.1.2.tgz",
+      "integrity": "sha512-gJiHrx5uTTHq44bjyIb3xpbmmdZcWLYPKeO9EPVOq8EylMFOiH2+9sWqKAiQ4DcFuOZTAxPOQyv0Rnmji/g15A==",
+      "license": "WTFPL",
+      "dependencies": {
+        "d3-hierarchy": "^1.1.5"
+      }
+    },
+    "node_modules/d3-flextree/node_modules/d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -605,6 +1047,15 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1164,6 +1615,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1398,6 +1855,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -1454,6 +1923,15 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1523,6 +2001,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/js-levenshtein": {
+      "version": "1.1.6",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
+      "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/js-sdsl": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@@ -1826,6 +2313,31 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "devOptional": true
     },
+    "node_modules/peerjs": {
+      "version": "1.4.7",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/peerjs/-/peerjs-1.4.7.tgz",
+      "integrity": "sha512-dWE2HIGvJO0Hm8lYHJiO/5OWl8xYtGcAuU08To1HMIfhh76ULzkCS3NIQO/PZm4noO1RhaGTkQaQ6sbAss6/Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.3.13",
+        "eventemitter3": "^4.0.7",
+        "peerjs-js-binarypack": "1.0.1",
+        "webrtc-adapter": "^7.7.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/peer"
+      }
+    },
+    "node_modules/peerjs-js-binarypack": {
+      "version": "1.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/peerjs-js-binarypack/-/peerjs-js-binarypack-1.0.1.tgz",
+      "integrity": "sha512-N6aeia3NhdpV7kiGxJV5xQiZZCVEEVjRz2T2C6UZQiBkHWHzUv/oWA4myQLcwBwO8LUoR1KWW5oStvwVesmfCg==",
+      "license": "BSD"
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2016,6 +2528,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.vue": {
+      "version": "3.4.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/qrcode.vue/-/qrcode.vue-3.4.0.tgz",
+      "integrity": "sha512-4XeImbv10Fin16Fl2DArCMhGyAdvIg2jb7vDT+hZiIAMg/6H6mz9nUZr/dR8jBcun5VzNzkiwKhiqOGbloinwA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2060,6 +2581,15 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -2116,6 +2646,12 @@
       "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
       "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
@@ -2131,6 +2667,19 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "sdp": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -2154,6 +2703,18 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/sass": {
       "version": "1.58.3",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
@@ -2171,6 +2732,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/sdp": {
+      "version": "2.12.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.3.8",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
@@ -2295,6 +2862,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.5.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/tslib/-/tslib-2.5.2.tgz",
+      "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -2319,6 +2892,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/upath": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
@@ -2495,6 +3077,20 @@
       "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
       "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
     },
+    "node_modules/webrtc-adapter": {
+      "version": "7.7.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz",
+      "integrity": "sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -2525,6 +3121,15 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/xml-beautifier": {
+      "version": "0.5.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/xml-beautifier/-/xml-beautifier-0.5.0.tgz",
+      "integrity": "sha512-QG/qiHeolHUd1tAtM+5zHxTzDprb8qvhmIYUYV1E9QK/jTFlrAa1Mz7QQqJPeqc3uuFAGzTOhjvbdx2hOP6bHw==",
+      "license": "MIT",
+      "dependencies": {
+        "repeat-string": "1.6.1"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -2642,6 +3247,14 @@
         "fastq": "^1.6.0"
       }
     },
+    "@swc/helpers": {
+      "version": "0.3.17",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/@swc/helpers/-/helpers-0.3.17.tgz",
+      "integrity": "sha512-tb7Iu+oZ+zWJZ3HJqwx8oNwSDIU440hmVMDPhpACWQWnrZHK99Bxs70gT1L2dnr5Hg50ZRWEFkQCAnOVVV0z1Q==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -2937,6 +3550,11 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "commander": {
+      "version": "7.2.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+    },
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -2976,6 +3594,284 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "d3": {
+      "version": "7.8.4",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3/-/d3-7.8.4.tgz",
+      "integrity": "sha512-q2WHStdhiBtD8DMmhDPyJmXUxr6VWRngKyiJ5EfXMxPw+tqT6BhNjhJZ4w3BHsNm3QoVfZLY8Orq/qPFczwKRA==",
+      "requires": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      }
+    },
+    "d3-array": {
+      "version": "3.2.3",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-array/-/d3-array-3.2.3.tgz",
+      "integrity": "sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      }
+    },
+    "d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "requires": {
+        "d3-array": "^3.2.0"
+      }
+    },
+    "d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "requires": {
+        "delaunator": "5"
+      }
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "requires": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "requires": {
+        "d3-dsv": "1 - 3"
+      }
+    },
+    "d3-flextree": {
+      "version": "2.1.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-flextree/-/d3-flextree-2.1.2.tgz",
+      "integrity": "sha512-gJiHrx5uTTHq44bjyIb3xpbmmdZcWLYPKeO9EPVOq8EylMFOiH2+9sWqKAiQ4DcFuOZTAxPOQyv0Rnmji/g15A==",
+      "requires": {
+        "d3-hierarchy": "^1.1.5"
+      },
+      "dependencies": {
+        "d3-hierarchy": {
+          "version": "1.1.9",
+          "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+          "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+        }
+      }
+    },
+    "d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
+    "d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "requires": {
+        "d3-array": "2.5.0 - 3"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
+    },
+    "d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+    },
+    "d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
+    },
+    "d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "requires": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "requires": {
+        "d3-path": "^3.1.0"
+      }
+    },
+    "d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2991,6 +3887,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "requires": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3302,6 +4206,11 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3470,6 +4379,14 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
+    "iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      }
+    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -3514,6 +4431,11 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3565,6 +4487,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "js-levenshtein": {
+      "version": "1.1.6",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
+      "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g=="
+    },
     "js-sdsl": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@@ -3791,6 +4718,22 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "devOptional": true
     },
+    "peerjs": {
+      "version": "1.4.7",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/peerjs/-/peerjs-1.4.7.tgz",
+      "integrity": "sha512-dWE2HIGvJO0Hm8lYHJiO/5OWl8xYtGcAuU08To1HMIfhh76ULzkCS3NIQO/PZm4noO1RhaGTkQaQ6sbAss6/Tg==",
+      "requires": {
+        "@swc/helpers": "^0.3.13",
+        "eventemitter3": "^4.0.7",
+        "peerjs-js-binarypack": "1.0.1",
+        "webrtc-adapter": "^7.7.1"
+      }
+    },
+    "peerjs-js-binarypack": {
+      "version": "1.0.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/peerjs-js-binarypack/-/peerjs-js-binarypack-1.0.1.tgz",
+      "integrity": "sha512-N6aeia3NhdpV7kiGxJV5xQiZZCVEEVjRz2T2C6UZQiBkHWHzUv/oWA4myQLcwBwO8LUoR1KWW5oStvwVesmfCg=="
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -3904,6 +4847,12 @@
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
       "dev": true
     },
+    "qrcode.vue": {
+      "version": "3.4.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/qrcode.vue/-/qrcode.vue-3.4.0.tgz",
+      "integrity": "sha512-4XeImbv10Fin16Fl2DArCMhGyAdvIg2jb7vDT+hZiIAMg/6H6mz9nUZr/dR8jBcun5VzNzkiwKhiqOGbloinwA==",
+      "requires": {}
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3925,6 +4874,11 @@
       "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
       "dev": true
     },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -3962,6 +4916,11 @@
       "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
       "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g=="
     },
+    "robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "rollup": {
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
@@ -3971,6 +4930,14 @@
         "fsevents": "~2.3.2"
       }
     },
+    "rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "requires": {
+        "sdp": "^2.6.0"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3980,6 +4947,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "sass": {
       "version": "1.58.3",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
@@ -3991,6 +4968,11 @@
         "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
+    "sdp": {
+      "version": "2.12.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "semver": {
       "version": "7.3.8",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
@@ -4075,6 +5057,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "tslib": {
+      "version": "2.5.2",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/tslib/-/tslib-2.5.2.tgz",
+      "integrity": "sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA=="
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4090,6 +5077,11 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true
     },
+    "unique-names-generator": {
+      "version": "4.7.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
+      "integrity": "sha512-lMx9dX+KRmG8sq6gulYYpKWZc9RlGsgBR6aoO8Qsm3qvkSJ+3rAymr+TnV8EDMrIrwuFJ4kruzMWM/OpYzPoow=="
+    },
     "upath": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
@@ -4181,6 +5173,15 @@
       "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
       "integrity": "sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ=="
     },
+    "webrtc-adapter": {
+      "version": "7.7.1",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz",
+      "integrity": "sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==",
+      "requires": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4202,6 +5203,14 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "xml-beautifier": {
+      "version": "0.5.0",
+      "resolved": "https://nexus.euc1.cicd.oneweb.mercedes-benz.com/repository/npm-general/xml-beautifier/-/xml-beautifier-0.5.0.tgz",
+      "integrity": "sha512-QG/qiHeolHUd1tAtM+5zHxTzDprb8qvhmIYUYV1E9QK/jTFlrAa1Mz7QQqJPeqc3uuFAGzTOhjvbdx2hOP6bHw==",
+      "requires": {
+        "repeat-string": "1.6.1"
+      }
+    },
     "xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
diff --git a/frontendVue3/package.json b/frontendVue3/package.json
index 7c2d8016..30e50274 100644
--- a/frontendVue3/package.json
+++ b/frontendVue3/package.json
@@ -12,12 +12,20 @@
     "@mdi/font": "7.0.96",
     "axios": "^1.3.4",
     "core-js": "^3.8.3",
+    "d3": "^7.4.4",
+    "d3-flextree": "^2.1.2",
+    "d3-hierarchy": "^3.1.2",
+    "js-levenshtein": "^1.1.6",
     "pinia": "^2.0.23",
+    "qrcode.vue": "^3.4.0",
     "roboto-fontface": "*",
     "vue": "^3.2.13",
     "vue-router": "^4.0.0",
     "vuetify": "^3.0.0",
-    "webfontloader": "^1.0.0"
+    "webfontloader": "^1.0.0",
+    "xml-beautifier": "^0.5.0",
+    "peerjs": "^1.4.7",
+    "unique-names-generator": "^4.7.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.3",
diff --git a/frontendVue3/src/App.vue b/frontendVue3/src/App.vue
index ef162909..b4a89896 100644
--- a/frontendVue3/src/App.vue
+++ b/frontendVue3/src/App.vue
@@ -29,7 +29,7 @@
                 </template>
             </v-snackbar>
         </v-main>
-        <TheFooter></TheFooter>
+        <TheFooter v-if="route.name !== 'FeatureModel'"></TheFooter>
     </v-app>
 </template>
 
@@ -39,7 +39,9 @@ import TheFooter from '@/components/Footer.vue';
 import { useAppStore } from '@/store/app';
 import { storeToRefs } from 'pinia';
 import { useDisplay } from 'vuetify';
+import { useRoute } from 'vue-router';
 
+const route = useRoute();
 const breakpoints = useDisplay();
 const appStore = useAppStore();
 
diff --git a/frontendVue3/src/classes/CollaborationManager.js b/frontendVue3/src/classes/CollaborationManager.js
new file mode 100644
index 00000000..eca0365e
--- /dev/null
+++ b/frontendVue3/src/classes/CollaborationManager.js
@@ -0,0 +1,343 @@
+import * as commandFactory from "@/classes/Commands/CommandFactory";
+import * as update from '@/services/FeatureModel/update.service.js';
+import beautify from "xml-beautifier";
+import {xmlToJson} from "@/services/xmlTranspiler.service";
+import {Peer} from "peerjs";
+import {animals, colors, uniqueNamesGenerator} from 'unique-names-generator';
+
+export default class CollaborationManager {
+    constructor(featureModelCommandManager, constraintCommandManager, featureModel) {
+        this.featureModelCommandManager = featureModelCommandManager;
+        this.featureModelCommandManager.collaborationManager = this;
+        this.featureModelCommandManager.type = 'featureModel';
+
+        this.constraintCommandManager = constraintCommandManager;
+        this.constraintCommandManager.collaborationManager = this;
+        this.constraintCommandManager.type = 'constraint';
+        this.blockEditRequests = false;
+
+        this.connections = [];
+        this.options = {
+            host: process.env.VUE_APP_DOMAIN_WEBSOCKET,
+            port: process.env.VUE_APP_DOMAIN_WEBSOCKET_PORT,
+            path: "/myapp",
+            pingInterval: 5000,
+            debug: 0,
+        };
+
+        this.collaborationKey = null;
+        this.featureModel = featureModel;
+
+        this.isHost = false;
+        this.isClient = false;
+        this.claimerId = null;
+        this.peer = null;
+        this.name = uniqueNamesGenerator({
+            dictionaries: [colors, animals],
+            style: 'capital',
+            separator: " ",
+        });
+
+        this.noConfirm = false;
+
+        // List of all clients inclusive host with { id, name }
+        this.members = [];
+        this.editorId = null;
+    }
+
+    createCollaboration() {
+        this.collaborationKey = this.generateUUID();
+        this.editorId = this.collaborationKey;
+
+        this.peer = new Peer(this.collaborationKey, this.options);
+        this.peer.on('open', () => {
+            this.isHost = true;
+            this.isClient = false;
+            this.featureModel.editRights = true;
+            this.featureModel.collaborationStatus = true;
+            this.name = 'Host';
+            this.editorId = this.peer._id;
+            this.showSnackbarMessage(`Created collaboration session and copied invitation link.`);
+
+            this.peer.on('connection', conn => {
+                this.connections.push(conn);
+                conn.on('data', data => this.receive(conn, data.type, data.action, data.data));
+                conn.on('open', () => {
+                    this.sendInitData(conn);
+                    this.showSnackbarMessage('New client joined to collaboration session');
+                });
+                conn.on('close', () => {
+                    this.showSnackbarMessage('Client disconnected', 'info');
+                    conn.close();
+                    this.connections = this.connections.filter(c => c !== conn);
+                    this.featureModel.editRights = !this.connections.find(c => c.editRights);
+
+                    this.members = this.members.filter(m => m.id !== conn.peer);
+                    this.featureModel.collaborationReloadKey++;
+                    if (this.editorId === conn.peer) {
+                        this.sendMemberData(this.collaborationKey);
+                    } else {
+                        this.sendMemberData();
+                    }
+                });
+            });
+
+        });
+        return this.collaborationKey;
+    }
+
+    joinCollaboration(key) {
+        this.collaborationKey = key;
+
+        this.peer = new Peer(this.options);
+        this.peer.on('open', () => {
+            const conn = this.peer.connect(key);
+            conn.on('open', () => {
+                this.isHost = false;
+                this.isClient = true;
+                this.featureModel.editRights = false;
+                this.featureModel.collaborationStatus = true;
+
+                this.showSnackbarMessage('Joined collaboration session');
+                this.connections.push(conn);
+
+                this.sendName();
+
+                conn.on('data', data => this.receive(conn, data.type, data.action, data.data));
+                conn.on('close', () => {
+                    this.connections = this.connections.filter(c => c !== conn);
+                    this.receiveClose();
+                });
+            });
+
+        });
+        this.peer.on('error', () => {
+            this.showSnackbarMessage('Cannot connect to collaboration session', 'error');
+        });
+    }
+
+    closeCollaboration() {
+        this.members = [];
+        this.connections.forEach(conn => conn.close());
+        this.connections = [];
+        this.collaborationKey = null;
+        this.featureModel.editRights = true;
+        this.claimerId = null;
+        this.editorId = null;
+        if (this.isHost) {
+            this.peer.destroy();
+        }
+        this.isHost = false;
+        this.isClient = false;
+        this.peer = null;
+        this.featureModel.collaborationStatus = false;
+    }
+
+    receive(sender, type, action, data) {
+        if (type === 'initialize') {
+            this.receiveInitialize(data);
+        } else if (type === 'close') {
+            this.receiveClose();
+        } else if (type === 'claimEditRights') {
+            this.receiveClaimEditRights(sender);
+        } else if (type === 'name') {
+            this.receiveName(action, data);
+        } else if (type === 'members') {
+            this.receiveMembers(data);
+        } else {
+            this.receiveCommand(sender, type, action, data);
+        }
+    }
+
+    receiveName(id, name) {
+        this.members = this.members.filter(m => m.id !== id);
+        this.members.push({id: id, name: name});
+
+        this.sendMemberData();
+    }
+
+    receiveMembers(data) {
+        this.blockEditRequests = data.blockEditRequests;
+        this.editorId = data.editorId;
+        this.featureModel.editRights = this.peer._id === data.editorId;
+        this.members = data.members.filter(m => m.id !== this.peer._id);
+        this.featureModel.collaborationReloadKey++;
+    }
+
+    receiveInitialize(data) {
+        const xml = beautify(data.xml);
+        this.featureModel.xml = xml;
+        xmlToJson(beautify(xml), this.featureModel.data);
+        this.featureModelCommandManager.remoteCommands = {
+            historyCommands: data.featureModelHistoryCommands,
+            futureCommands: data.featureModelFutureCommands,
+        };
+        this.constraintCommandManager.remoteCommands = {
+            historyCommands: data.constraintHistoryCommands,
+            futureCommands: data.constraintFutureCommands,
+        };
+    }
+
+    receiveClose() {
+        if (this.isClient) {
+            this.showSnackbarMessage('Host has closed collaboration session', 'info');
+            this.noConfirm = true;
+            this.featureModel.showContinueEditingDialog = true;
+        }
+    }
+
+    receiveClaimEditRights(sender) {
+        if (!this.featureModel.showClaimDialog && !this.blockEditRequests) {
+            this.featureModel.showClaimDialog = true;
+            this.claimerId = sender.peer;
+        }
+    }
+
+    receiveCommand(sender, type, action, data) {
+        this.sendExcluded(sender, type, action, data);
+        let commandManager;
+        if (type === 'constraint') {
+            commandManager = this.constraintCommandManager;
+        } else if (type === 'featureModel') {
+            commandManager = this.featureModelCommandManager;
+        } else {
+            console.error('Unknown command');
+            return;
+        }
+
+        if (action === 'execute') {
+            const command = commandFactory.create(this.featureModel.data.rootNode, this.featureModel.data.constraints, type, data, this.featureModel);
+            commandManager.execute(command, false);
+        } else if (action === 'undo') {
+            commandManager.undo(false);
+        } else if (action === 'redo') {
+            commandManager.redo(false);
+        } else {
+            console.error('Unknown command');
+            return;
+        }
+
+        if (type === 'featureModel') {
+            update.updateSvg(this.featureModelCommandManager.d3Data);
+        }
+    }
+
+    sendMemberData(newEditorId = undefined) {
+        if (newEditorId) {
+            this.editorId = newEditorId;
+            this.featureModel.editRights = this.collaborationKey === this.editorId;
+        }
+
+        const members = [...this.members, {id: this.collaborationKey, name: this.name}];
+        this.send('members', null, {
+            members: members,
+            editorId: this.editorId,
+            blockEditRequests: this.blockEditRequests,
+        });
+        this.featureModel.collaborationReloadKey++;
+    }
+
+    send(type, action = null, data = null) {
+        const toSend = {
+            type: type,
+            action: action,
+            data: data,
+        };
+
+        this.connections.forEach(conn => conn.send(toSend));
+    }
+
+    sendName(name = undefined) {
+        if (name) {
+            this.name = name;
+        }
+
+        // Send own name
+        this.send('name', this.peer._id, this.name);
+    }
+
+    sendExcluded(excluded, type, action, data) {
+        const toSend = {
+            type: type,
+            action: action,
+            data: data,
+        };
+
+        this.connections.filter(conn => conn !== excluded).forEach(conn => conn.send(toSend));
+    }
+
+    sendInitData(connection) {
+        connection.send({
+            type: "initialize",
+            action: null,
+            data: {
+                xml: this.featureModel.xml,
+                featureModelHistoryCommands: this.featureModelCommandManager.historyCommands.map(command => ({
+                    type: 'featureModel',
+                    action: null,
+                    data: command.createDTO(),
+                })),
+                featureModelFutureCommands: this.featureModelCommandManager.futureCommands.map(command => ({
+                    type: 'featureModel',
+                    action: null,
+                    data: command.createDTO(),
+                })),
+                constraintHistoryCommands: this.constraintCommandManager.historyCommands.map(command => ({
+                    type: 'constraint',
+                    action: null,
+                    data: command.createDTO(),
+                })),
+                constraintFutureCommands: this.constraintCommandManager.futureCommands.map(command => ({
+                    type: 'constraint',
+                    action: null,
+                    data: command.createDTO(),
+                })),
+            },
+        });
+    }
+
+    sendClaimEditRightsRequest() {
+        this.send('claimEditRights');
+    }
+
+    sendClaimEditRightsResponse(response) {
+        this.featureModel.showClaimDialog = false;
+
+        if (response) {
+            this.sendMemberData(this.claimerId);
+            this.showSnackbarMessage('You lost edit rights', 'info');
+        }
+    }
+
+    generateUUID() {
+        let
+            d = new Date().getTime(),
+            d2 = (performance && performance.now && (performance.now() * 1000)) || 0;
+        const uuid = 'xxxxxxxx'.replace(/[xy]/g, c => {
+            let r = Math.random() * 16;
+            if (d > 0) {
+                r = (d + r) % 16 | 0;
+                d = Math.floor(d / 16);
+            } else {
+                r = (d2 + r) % 16 | 0;
+                d2 = Math.floor(d2 / 16);
+            }
+            return (c === 'x' ? r : (r & 0x7 | 0x8)).toString(16);
+        });
+
+        return uuid + (Array.from(uuid).reduce((last, curr) => parseInt(last, 16) + parseInt(curr, 16)) % 16).toString(16);
+    }
+
+    showSnackbarMessage(message, variant = 'success') {
+        this.featureModel.$store.commit("updateSnackbar", {
+            message: message,
+            variant: variant,
+            timeout: 5000,
+            show: true,
+        });
+    }
+
+    getClaimerName() {
+        return this.members.find(m => m.id === this.claimerId)?.name;
+    }
+}
diff --git a/frontendVue3/src/classes/Commands/Command.js b/frontendVue3/src/classes/Commands/Command.js
new file mode 100644
index 00000000..7791a23f
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/Command.js
@@ -0,0 +1,4 @@
+export class Command {
+    markChanges() {}
+    unmarkChanges() {}
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Commands/CommandFactory.js b/frontendVue3/src/classes/Commands/CommandFactory.js
new file mode 100644
index 00000000..7a0e71c2
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/CommandFactory.js
@@ -0,0 +1,38 @@
+import {AddCommand} from "@/classes/Commands/FeatureModel/AddCommand";
+import * as constraint_add from "@/classes/Commands/Constraints/AddCommand";
+import * as constraint_delete from "@/classes/Commands/Constraints/DeleteCommand";
+import * as constraint_edit from "@/classes/Commands/Constraints/EditCommand";
+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";
+
+export function create(rootNode, allConstraints, type, data, featureModelComponent) {
+    if (type === 'featureModel') {
+        if (data.commandType === 'add') {
+            const dstParent = rootNode.descendants().find(node => node.name === data.dstParentName);
+            return new AddCommand(dstParent, data.dstIndex, data.data);
+        } else if (data.commandType === 'edit') {
+            const node = rootNode.descendants().find(node => node.name === data.nodeName);
+            return new EditCommand(node, data.newData);
+        } else if (data.commandType === 'swap') {
+            const node = rootNode.descendants().find(node => node.name === data.nodeName);
+            const dstParent = rootNode.descendants().find(node => node.name === data.dstParentName);
+            return new SwapCommand(node, dstParent, data.dstIndex);
+        } else if (data.commandType === 'new-empty-model') {
+            return new NewEmptyModelCommand(featureModelComponent);
+        }
+    } else {
+        if (data.commandType === 'add') {
+            const newConstraintItem = parse(data.constraintItemInfix, rootNode.descendants());
+            return new constraint_add.AddCommand(allConstraints, newConstraintItem);
+        } else if (data.commandType === 'delete') {
+            const constraint = allConstraints[data.index];
+            return new constraint_delete.DeleteCommand(allConstraints, constraint);
+        } else if (data.commandType === 'edit') {
+            const constraint = allConstraints.find(con => con.toStringForEdit() === data.constraintItemInfix);
+            const newConstraintItem = parse(data.newConstraintItemInfix, rootNode.descendants());
+            return new constraint_edit.EditCommand(allConstraints, constraint, newConstraintItem);
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Commands/CommandManager.js b/frontendVue3/src/classes/Commands/CommandManager.js
new file mode 100644
index 00000000..84f41fe8
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/CommandManager.js
@@ -0,0 +1,120 @@
+import * as commandFactory from "@/classes/Commands/CommandFactory";
+import * as update from '@/services/FeatureModel/update.service.js';
+
+export class CommandManager {
+    constructor() {
+        this.historyCommands = [];
+        this.futureCommands = [];
+        this.collaborationManager = null;
+        this.type = null;
+        this.remoteCommands = null;
+        this.commandEvent = null;
+        this.d3Data = null;
+    }
+
+    execute(command, initiator = true) {
+        if (initiator && this.collaborationManager) {
+            this.collaborationManager.send(this.type, 'execute', command.createDTO());
+        }
+
+        // Execute current command and push it on stack.
+        command.execute();
+
+        // Mark last change
+        if (this.historyCommands.length) {
+            this.historyCommands.at(-1).unmarkChanges();
+        }
+        command.markChanges();
+
+        this.historyCommands.push(command);
+
+        // Reset stack of future commands because a new command was already executed.
+        this.futureCommands = [];
+
+        this.commandEvent();
+
+        this.fadeOut(this.d3Data, command);
+    }
+
+    undo(initiator = true) {
+        if (this.historyCommands.length) {
+            if (initiator && this.collaborationManager) {
+                this.collaborationManager.send(this.type, 'undo');
+            }
+
+            // Remove last command from stack and undo it.
+            const undoCommand = this.historyCommands.pop();
+            undoCommand.undo();
+
+            // Mark last change
+            undoCommand.unmarkChanges();
+            if (this.historyCommands.length) {
+                this.historyCommands.at(-1).markChanges();
+            }
+
+            // After that push it to stack that only holds redo-commands.
+            this.futureCommands.push(undoCommand);
+
+            this.commandEvent();
+
+            this.fadeOut(this.d3Data, undoCommand);
+        }
+    }
+
+    redo(initiator = true) {
+        if (this.futureCommands.length) {
+            if (initiator && this.collaborationManager) {
+                this.collaborationManager.send(this.type, 'redo');
+            }
+
+            // Remove last command from stack and execute it once again.
+            const redoCommand = this.futureCommands.pop();
+            redoCommand.execute();
+
+            // Mark last change
+            if (this.historyCommands.length) {
+                this.historyCommands.at(-1).unmarkChanges();
+            }
+            redoCommand.markChanges();
+
+            // After that push it to stack that only holds undo-commands.
+            this.historyCommands.push(redoCommand);
+
+            this.commandEvent();
+
+            this.fadeOut(this.d3Data, redoCommand);
+        }
+    }
+
+    isUndoAvailable() {
+        return this.historyCommands.length >= 1;
+    }
+
+    isRedoAvailable() {
+        return this.futureCommands.length >= 1;
+    }
+
+    executeRemoteCommands(rootNode, constraints) {
+        if (this.remoteCommands) {
+            this.remoteCommands.historyCommands.forEach(commandData => {
+                const command = commandFactory.create(rootNode, constraints, commandData.type, commandData.data, this.collaborationManager.featureModel);
+                this.execute(command, false);
+            });
+
+            this.remoteCommands.futureCommands.forEach(commandData => {
+                const command = commandFactory.create(rootNode, constraints, commandData.type, commandData.data, this.collaborationManager.featureModel);
+                this.execute(command, false);
+            });
+
+            this.remoteCommands.futureCommands.forEach(() => this.undo(false));
+        }
+    }
+
+    fadeOut(d3Data, command) {
+        // Rerender for edits and fade them out
+        setTimeout(() => {
+            command.unmarkChanges();
+            update.updateSvg(d3Data);
+        }, 5000);
+    }
+}
diff --git a/frontendVue3/src/classes/Commands/Constraints/AddCommand.js b/frontendVue3/src/classes/Commands/Constraints/AddCommand.js
new file mode 100644
index 00000000..e551c483
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/Constraints/AddCommand.js
@@ -0,0 +1,27 @@
+import {ConstraintCommand} from "@/classes/Commands/Constraints/ConstraintCommand";
+import {Constraint} from "@/classes/Constraint";
+
+export class AddCommand extends ConstraintCommand {
+    constructor(allConstraints, newConstraintItem) {
+        const newConstraint = new Constraint(newConstraintItem);
+        super(allConstraints, newConstraint);
+    }
+
+    execute() {
+        this.allConstraints.push(this.constraint);
+        this.constraint.rule.setConstraint(this.constraint);
+    }
+
+    undo() {
+        this.constraint.rule.removeConstraint();
+        const index = this.allConstraints.indexOf(this.constraint);
+        this.allConstraints.splice(index, 1);
+    }
+
+    createDTO() {
+        return {
+            commandType: 'add',
+            constraintItemInfix: this.constraint.toStringForEdit(),
+        };
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Commands/Constraints/ConstraintCommand.js b/frontendVue3/src/classes/Commands/Constraints/ConstraintCommand.js
new file mode 100644
index 00000000..0acb21ae
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/Constraints/ConstraintCommand.js
@@ -0,0 +1,13 @@
+import {Command} from "@/classes/Commands/Command";
+
+export class ConstraintCommand extends Command {
+    constructor(allConstraints, constraint) {
+        super();
+        this.constraint = constraint;
+        this.allConstraints = allConstraints;
+    }
+
+    markChanges() { /* Do nothing */ }
+
+    unmarkChanges() { /* Do nothing */ }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Commands/Constraints/DeleteCommand.js b/frontendVue3/src/classes/Commands/Constraints/DeleteCommand.js
new file mode 100644
index 00000000..c5561f97
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/Constraints/DeleteCommand.js
@@ -0,0 +1,26 @@
+import {ConstraintCommand} from "@/classes/Commands/Constraints/ConstraintCommand";
+
+export class DeleteCommand extends ConstraintCommand {
+    constructor(allConstraints, constraint) {
+        super(allConstraints, constraint);
+
+        this.index = this.allConstraints.indexOf(constraint);
+    }
+
+    execute() {
+        this.constraint.rule.removeConstraint();
+        this.allConstraints.splice(this.index, 1);
+    }
+
+    undo() {
+        this.allConstraints.splice(this.index, 0, this.constraint);
+        this.constraint.rule.setConstraint(this.constraint);
+    }
+
+    createDTO() {
+        return {
+            commandType: 'delete',
+            index: this.index,
+        };
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Commands/Constraints/EditCommand.js b/frontendVue3/src/classes/Commands/Constraints/EditCommand.js
new file mode 100644
index 00000000..4614bf44
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/Constraints/EditCommand.js
@@ -0,0 +1,28 @@
+import {ConstraintCommand} from "@/classes/Commands/Constraints/ConstraintCommand";
+
+export class EditCommand extends ConstraintCommand {
+    constructor(allConstraints, constraint, newConstraintItem) {
+        super(allConstraints, constraint);
+
+        this.newConstraintItem = newConstraintItem;
+        this.oldConstraintItem = constraint.rule;
+    }
+
+    execute() {
+        this.constraint.rule = this.newConstraintItem;
+        this.constraint.rule.setConstraint(this.constraint);
+    }
+
+    undo() {
+        this.constraint.rule = this.oldConstraintItem;
+        this.constraint.rule.setConstraint(this.constraint);
+    }
+
+    createDTO() {
+        return {
+            commandType: 'edit',
+            constraintItemInfix: this.oldConstraintItem.toStringForEdit(),
+            newConstraintItemInfix: this.newConstraintItem.toStringForEdit(),
+        };
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Commands/FeatureModel/AddCommand.js b/frontendVue3/src/classes/Commands/FeatureModel/AddCommand.js
new file mode 100644
index 00000000..c4758eea
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/FeatureModel/AddCommand.js
@@ -0,0 +1,35 @@
+import {FeatureNodeCommand} from "@/classes/Commands/FeatureModel/FeatureNodeCommand";
+import {createFeatureNode} from "@/classes/FeatureNode";
+
+export class AddCommand extends FeatureNodeCommand {
+    constructor(dstParent, dstIndex, data) {
+        const node = createFeatureNode(dstParent, data.name, data.groupType, data.mandatory, data.abstract);
+        super(node);
+        this.dstParent = dstParent;
+        this.dstIndex = dstIndex;
+        this.data = data;
+    }
+
+    execute() {
+        this.dstParent.uncollapse();
+        this.dstParent.unhideChildren();
+
+        this.dstParent.insertChildAtIndex(this.node, this.dstIndex);
+    }
+
+    undo() {
+        this.dstParent.uncollapse();
+        this.dstParent.unhideChildren();
+
+        this.dstParent.removeChild(this.node);
+    }
+
+    createDTO() {
+        return {
+            commandType: 'add',
+            dstParentName: this.dstParent.name,
+            dstIndex: this.dstIndex,
+            data: this.data,
+        };
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Commands/FeatureModel/EditCommand.js b/frontendVue3/src/classes/Commands/FeatureModel/EditCommand.js
new file mode 100644
index 00000000..47f49077
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/FeatureModel/EditCommand.js
@@ -0,0 +1,49 @@
+import {FeatureNodeCommand} from "@/classes/Commands/FeatureModel/FeatureNodeCommand";
+
+export class EditCommand extends FeatureNodeCommand {
+    constructor(node, newData) {
+        super();
+        this.node = node;
+        this.newData = newData;
+
+        // Properties for undo.
+        this.oldData = {
+            name: this.node.name,
+            groupType: this.node.groupType,
+            mandatory: this.node.isMandatory,
+            abstract: this.node.isAbstract,
+        };
+    }
+
+    execute() {
+        if (this.node.parent) {
+            this.node.parent.uncollapse();
+            this.node.parent.unhideChildren();
+        }
+
+        this.node.name = this.newData.name;
+        this.node.groupType = this.newData.groupType;
+        this.node.isMandatory = this.newData.mandatory;
+        this.node.isAbstract = this.newData.abstract;
+    }
+
+    undo() {
+        if (this.node.parent) {
+            this.node.parent.uncollapse();
+            this.node.parent.unhideChildren();
+        }
+
+        this.node.name = this.oldData.name;
+        this.node.groupType = this.oldData.groupType;
+        this.node.isMandatory = this.oldData.mandatory;
+        this.node.isAbstract = this.oldData.abstract;
+    }
+
+    createDTO() {
+        return {
+            commandType: 'edit',
+            nodeName: this.oldData.name,
+            newData: this.newData,
+        };
+    }
+}
diff --git a/frontendVue3/src/classes/Commands/FeatureModel/FeatureNodeCommand.js b/frontendVue3/src/classes/Commands/FeatureModel/FeatureNodeCommand.js
new file mode 100644
index 00000000..b842dcfc
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/FeatureModel/FeatureNodeCommand.js
@@ -0,0 +1,16 @@
+import {Command} from "@/classes/Commands/Command";
+
+export class FeatureNodeCommand extends Command {
+    constructor(node) {
+        super();
+        this.node = node;
+    }
+
+    markChanges() {
+        this.node.markAsEdited();
+    }
+
+    unmarkChanges() {
+        this.node.unmarkAsEdited();
+    }
+}
diff --git a/frontendVue3/src/classes/Commands/FeatureModel/NewEmptyModelCommand.js b/frontendVue3/src/classes/Commands/FeatureModel/NewEmptyModelCommand.js
new file mode 100644
index 00000000..3c6cc178
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/FeatureModel/NewEmptyModelCommand.js
@@ -0,0 +1,54 @@
+import {Command} from "@/classes/Commands/Command";
+import * as init from '@/services/FeatureModel/init.service.js';
+import {FeatureNode} from "@/classes/FeatureNode";
+
+export class NewEmptyModelCommand extends Command {
+    constructor(featureModelComponent) {
+        super();
+        this.featureModelComponent = featureModelComponent;
+        this.d3Data = this.featureModelComponent.$refs.featureModelTree.d3Data;
+
+        // Constraint command manager
+        this.constraintCommandManager = this.featureModelComponent.constraintCommandManager;
+        this.historyCommands = this.constraintCommandManager.historyCommands;
+        this.futureCommands = this.constraintCommandManager.futureCommands;
+
+        this.oldRoot = this.d3Data.root;
+
+        this.oldData = this.featureModelComponent.data;
+        this.newData = {
+            featureMap: [],
+            constraints: [],
+            properties: [],
+            calculations: undefined,
+            comments: [],
+            featureOrder: undefined,
+            rootNode: new FeatureNode(null, 'Root', 'and', false, false),
+        };
+    }
+
+    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;
+    }
+
+    createDTO() {
+        return {
+            commandType: 'new-empty-model',
+        };
+    }
+}
diff --git a/frontendVue3/src/classes/Commands/FeatureModel/SwapCommand.js b/frontendVue3/src/classes/Commands/FeatureModel/SwapCommand.js
new file mode 100644
index 00000000..8f4bd07a
--- /dev/null
+++ b/frontendVue3/src/classes/Commands/FeatureModel/SwapCommand.js
@@ -0,0 +1,47 @@
+import {FeatureNodeCommand} from "@/classes/Commands/FeatureModel/FeatureNodeCommand";
+
+export class SwapCommand extends FeatureNodeCommand {
+    constructor(node, dstParent, dstIndex) {
+        super(node);
+        this.dstParent = dstParent;
+        this.dstIndex = dstIndex;
+
+        // Properties for undo.
+        this.srcParent = null;
+        this.srcIndex = null;
+    }
+
+    execute() {
+        this.dstParent.uncollapse();
+        this.dstParent.unhideChildren();
+
+        this.srcParent = this.node.parent;
+        this.srcIndex = this.srcParent.children.indexOf(this.node);
+
+        // Special case: If node is on same level and left of the ghost the index has to be decreased.
+        let tmp = 0;
+        if (this.srcParent === this.dstParent && this.srcIndex < this.dstIndex) {
+            tmp = 1;
+        }
+
+        this.srcParent.removeChild(this.node);
+        this.dstParent.insertChildAtIndex(this.node, this.dstIndex - tmp);
+    }
+
+    undo() {
+        this.dstParent.uncollapse();
+        this.dstParent.unhideChildren();
+
+        this.dstParent.removeChild(this.node);
+        this.srcParent.insertChildAtIndex(this.node, this.srcIndex);
+    }
+
+    createDTO() {
+        return {
+            commandType: 'swap',
+            nodeName: this.node.name,
+            dstParentName: this.dstParent.name,
+            dstIndex: this.dstIndex,
+        };
+    }
+}
diff --git a/frontendVue3/src/classes/Constraint.js b/frontendVue3/src/classes/Constraint.js
new file mode 100644
index 00000000..85c447cf
--- /dev/null
+++ b/frontendVue3/src/classes/Constraint.js
@@ -0,0 +1,53 @@
+import * as CONSTANTS from "./constants";
+
+export class Constraint {
+
+    constructor(rule) {
+        this.isHighlighted = false;
+        this.rule = rule;
+        this.rule.setConstraint(this);
+    }
+
+    highlight() {
+        if (!this.isHighlighted) {
+            this.color = CONSTANTS.CONSTRAINT_HIGHLIGHT_COLORS.pop();
+            this.isHighlighted = true;
+        }
+    }
+
+    resetHighlight() {
+        if (this.isHighlighted) {
+            CONSTANTS.CONSTRAINT_HIGHLIGHT_COLORS.push(this.color);
+            this.color = undefined;
+            this.isHighlighted = false;
+        }
+    }
+
+    toggleHighlighted() {
+        if (this.isHighlighted) {
+            this.resetHighlight();
+        } else {
+            this.highlight();
+        }
+    }
+
+    getFeatureNodes() {
+        return this.rule.getFeatureNodes();
+    }
+
+    toString() {
+        return this.rule.toString();
+    }
+
+    toStringForEdit() {
+        return this.rule.toStringForEdit();
+    }
+
+    toStringPostfix() {
+        return this.rule.toStringPostfix();
+    }
+
+    toStringXML() {
+        return this.rule.toStringXML();
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Constraint/Conjunction.js b/frontendVue3/src/classes/Constraint/Conjunction.js
new file mode 100644
index 00000000..acd03011
--- /dev/null
+++ b/frontendVue3/src/classes/Constraint/Conjunction.js
@@ -0,0 +1,7 @@
+import {GroupConstraintItem} from "@/classes/Constraint/GroupConstraintItem";
+
+export class Conjunction extends GroupConstraintItem {
+    constructor(first, second) {
+        super(first, second, '∧', 'AND', 'conj');
+    }
+}
diff --git a/frontendVue3/src/classes/Constraint/ConstraintItem.js b/frontendVue3/src/classes/Constraint/ConstraintItem.js
new file mode 100644
index 00000000..dd0f2823
--- /dev/null
+++ b/frontendVue3/src/classes/Constraint/ConstraintItem.js
@@ -0,0 +1,32 @@
+import {operatorPrecedence} from "@/services/booleanExpressionParser.service";
+
+export class ConstraintItem {
+
+    addPossibleBrackets(item) {
+        if (item.count() === 1 || this.getPrecedence() >= item.getPrecedence()) {
+            return `${item.toString()}`;
+        } else {
+            return `(${item.toString()})`;
+        }
+    }
+
+    addPossibleBracketsForEdit(item) {
+        if (item.count() === 1 || this.getPrecedence() >= item.getPrecedence()) {
+            return `${item.toStringForEdit()}`;
+        } else {
+            return `(${item.toStringForEdit()})`;
+        }
+    }
+
+    getPrecedence() {
+        if (this.constructor.name === 'Disjunction') {
+            return operatorPrecedence['or'];
+        } else if (this.constructor.name === 'Conjunction') {
+            return operatorPrecedence['and'];
+        } else if (this.constructor.name === 'Implication') {
+            return operatorPrecedence['implies'];
+        } else if (this.constructor.name === 'Negation') {
+            return operatorPrecedence['neg'];
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Constraint/Disjunction.js b/frontendVue3/src/classes/Constraint/Disjunction.js
new file mode 100644
index 00000000..662bbb96
--- /dev/null
+++ b/frontendVue3/src/classes/Constraint/Disjunction.js
@@ -0,0 +1,7 @@
+import {GroupConstraintItem} from "@/classes/Constraint/GroupConstraintItem";
+
+export class Disjunction extends GroupConstraintItem {
+    constructor(first, second) {
+        super(first, second, '∨', 'OR', 'disj');
+    }
+}
diff --git a/frontendVue3/src/classes/Constraint/FeatureNodeConstraintItem.js b/frontendVue3/src/classes/Constraint/FeatureNodeConstraintItem.js
new file mode 100644
index 00000000..9fb6443e
--- /dev/null
+++ b/frontendVue3/src/classes/Constraint/FeatureNodeConstraintItem.js
@@ -0,0 +1,49 @@
+import {ConstraintItem} from "@/classes/Constraint/ConstraintItem";
+
+export class FeatureNodeConstraintItem extends ConstraintItem {
+    constructor(featureNode) {
+        super();
+        this.featureNode = featureNode;
+    }
+
+    count() {
+        return 1;
+    }
+
+    toString() {
+        const str = this.featureNode.name;
+        if (str.split(" ").length > 1) {
+            return `"${str}"`;
+        } else {
+            return str;
+        }
+    }
+
+    toStringForEdit() {
+        return this.toString();
+    }
+
+    toStringPostfix() {
+        return this.toString();
+    }
+
+    toStringXML() {
+        return `<var>${this.featureNode.name}</var>`;
+    }
+
+    getFeatureNodes() {
+        return [this.featureNode];
+    }
+
+    setConstraint(constraint) {
+        this.constraint = constraint;
+        if (!this.featureNode.constraints.includes(this.constraint)) {
+            this.featureNode.constraints.push(this.constraint);
+        }
+    }
+
+    removeConstraint() {
+        this.featureNode.constraints = this.featureNode.constraints.filter((c) => c !== this.constraint);
+        this.constraint = null;
+    }
+}
diff --git a/frontendVue3/src/classes/Constraint/GroupConstraintItem.js b/frontendVue3/src/classes/Constraint/GroupConstraintItem.js
new file mode 100644
index 00000000..8db6ed09
--- /dev/null
+++ b/frontendVue3/src/classes/Constraint/GroupConstraintItem.js
@@ -0,0 +1,53 @@
+import {ConstraintItem} from "@/classes/Constraint/ConstraintItem";
+
+export class GroupConstraintItem extends ConstraintItem {
+    constructor(first, second, symbol, operator, tag) {
+        super();
+        this.first = first;
+        this.second = second;
+        this.operator = operator;
+        this.symbol = symbol;
+        this.tag = tag;
+    }
+
+    count() {
+        return 2;
+    }
+
+    toString() {
+        const firstText = this.first.constructor.name === this.constructor.name ? this.first.toString() : this.addPossibleBrackets(this.first);
+        const secondText = this.second.constructor.name === this.constructor.name ? this.second.toString() : this.addPossibleBrackets(this.second);
+        return `${firstText} ${this.symbol} ${secondText}`;
+    }
+
+    toStringPostfix() {
+        return `${this.first.toStringPostfix()} ${this.second.toStringPostfix()} ${this.constructor.name}`;
+    }
+
+    toStringForEdit() {
+        const firstText = this.first.constructor.name === this.constructor.name ? this.first.toStringForEdit() : this.addPossibleBracketsForEdit(this.first);
+        const secondText = this.second.constructor.name === this.constructor.name ? this.second.toStringForEdit() : this.addPossibleBracketsForEdit(this.second);
+        return `${firstText} ${this.operator} ${secondText}`;
+    }
+
+    toStringXML() {
+        return `<${this.tag}>
+        ${this.first.toStringXML()} 
+        ${this.second.toStringXML()}
+        </${this.tag}>`;
+    }
+
+    getFeatureNodes() {
+        return [...this.first.getFeatureNodes(), ...this.second.getFeatureNodes()];
+    }
+
+    setConstraint(constraint) {
+        this.first.setConstraint(constraint);
+        this.second.setConstraint(constraint);
+    }
+
+    removeConstraint() {
+        this.first.removeConstraint();
+        this.second.removeConstraint();
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/Constraint/Implication.js b/frontendVue3/src/classes/Constraint/Implication.js
new file mode 100644
index 00000000..4fafb0bc
--- /dev/null
+++ b/frontendVue3/src/classes/Constraint/Implication.js
@@ -0,0 +1,43 @@
+import {ConstraintItem} from "@/classes/Constraint/ConstraintItem";
+
+export class Implication extends ConstraintItem {
+    constructor(premise, conclusion) {
+        super();
+        this.premise = premise;
+        this.conclusion = conclusion;
+    }
+
+    count() {
+        return 2;
+    }
+
+    toString() {
+        return `${this.addPossibleBrackets(this.premise)} ⇒ ${this.addPossibleBrackets(this.conclusion)}`;
+    }
+
+    toStringForEdit() {
+        return `${this.addPossibleBracketsForEdit(this.premise)} IMPLIES ${this.addPossibleBracketsForEdit(this.conclusion)}`;
+    }
+
+    toStringPostfix() {
+        return `${this.premise.toStringPostfix()} ${this.conclusion.toStringPostfix()} Implication`;
+    }
+
+    toStringXML() {
+        return `<imp>${this.premise.toStringXML()} ${this.conclusion.toStringXML()}</imp>`;
+    }
+
+    getFeatureNodes() {
+        return [...this.premise.getFeatureNodes().flat(), ...this.conclusion.getFeatureNodes()];
+    }
+
+    setConstraint(constraint) {
+        this.premise.setConstraint(constraint);
+        this.conclusion.setConstraint(constraint);
+    }
+
+    removeConstraint() {
+        this.premise.removeConstraint();
+        this.conclusion.removeConstraint();
+    }
+}
diff --git a/frontendVue3/src/classes/Constraint/Negation.js b/frontendVue3/src/classes/Constraint/Negation.js
new file mode 100644
index 00000000..2522d7eb
--- /dev/null
+++ b/frontendVue3/src/classes/Constraint/Negation.js
@@ -0,0 +1,40 @@
+import {ConstraintItem} from "@/classes/Constraint/ConstraintItem";
+
+export class Negation extends ConstraintItem {
+    constructor(item) {
+        super();
+        this.item = item;
+    }
+
+    count() {
+        return 1;
+    }
+
+    toString() {
+        return `¬${this.addPossibleBrackets(this.item)}`;
+    }
+
+    toStringForEdit() {
+        return `NOT ${this.addPossibleBracketsForEdit(this.item)}`;
+    }
+
+    toStringPostfix() {
+        return `${this.item.toStringPostfix()} Negation`;
+    }
+
+    toStringXML() {
+        return `<not>${this.item.toStringXML()}</not>`;
+    }
+
+    getFeatureNodes() {
+        return this.item.getFeatureNodes();
+    }
+
+    setConstraint(constraint) {
+        this.item.setConstraint(constraint);
+    }
+
+    removeConstraint() {
+        this.item.removeConstraint();
+    }
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/FeatureNode.js b/frontendVue3/src/classes/FeatureNode.js
new file mode 100644
index 00000000..428fa0c7
--- /dev/null
+++ b/frontendVue3/src/classes/FeatureNode.js
@@ -0,0 +1,356 @@
+import * as CONSTANTS from './constants';
+import * as d3 from "d3";
+import {PseudoNode} from "@/classes/PseudoNode";
+
+export class FeatureNode {
+    constructor(parent, name, groupType, mandatory, abstract) {
+        this.parent = parent;
+        this.name = name;
+        this.displayName = name.slice(0, CONSTANTS.DISPLAY_NAME_LENGTH) + '...';
+        this.children = [];
+        this.groupType = groupType;
+        this.isRoot = parent === null;
+        this.isMandatory = mandatory;
+        this.isAbstract = abstract;
+        this.colorValue = CONSTANTS.NODE_COLOR;
+        this.constraints = [];
+        this.isCollapsed = false;
+        this.isHidden = false;
+        this.d3Node = null;
+        this.markedAsEdited = false;
+    }
+
+    color() {
+        if (this.markedAsEdited) {
+            return CONSTANTS.NODE_EDITED_COLOR;
+        } else if (this.isAbstract) {
+            return CONSTANTS.NODE_ABSTRACT_COLOR;
+        } else {
+            return this.colorValue;
+        }
+    }
+
+    level() {
+        if (this.isRoot) {
+            return 0;
+        } else {
+            return this.parent.level() + 1;
+        }
+    }
+
+    childrenCount() {
+        if (this.isLeaf()) {
+            return 0;
+        } else {
+            return this.children.length;
+        }
+    }
+
+    totalSubnodesCount() {
+        if (this.isLeaf()) {
+            return 0;
+        } else {
+            let totalSubnodesCount = this.children.length;
+            this.children.forEach(node => {
+                totalSubnodesCount += node.totalSubnodesCount();
+            });
+            return totalSubnodesCount;
+        }
+    }
+
+    isAnd() {
+        return this.groupType === 'and';
+    }
+
+    isOr() {
+        return this.groupType === 'or';
+    }
+
+    isAlt() {
+        return this.groupType === 'alt';
+    }
+
+    isLeaf() {
+        return this.children.length === 0;
+    }
+
+    uncollapse(toRoot = true) {
+        if (this.isCollapsed && !this.isLeaf()) {
+            this.d3Node.children = this.d3Node.collapsedChildren;
+            this.d3Node.collapsedChildren = null;
+        }
+
+        if (!this.isRoot && toRoot) {
+            this.parent.uncollapse();
+        }
+
+        this.isCollapsed = false;
+    }
+
+    collapse() {
+        if (!this.isCollapsed && !this.isLeaf()) {
+            this.d3Node.collapsedChildren = this.d3Node.children;
+            this.d3Node.children = null;
+        }
+
+        this.isCollapsed = true;
+    }
+
+    toggleCollapse() {
+        if (this.isCollapsed) {
+            this.uncollapse();
+        } else {
+            this.collapse();
+        }
+    }
+
+    getAllNodesToRoot() {
+        if (this.isRoot) {
+            return [this];
+        } else {
+            return [this, ...this.parent.getAllNodesToRoot()];
+        }
+    }
+
+    getLeftSibling() {
+        const index = this.parent.children.indexOf(this);
+        if (index === 0) {
+            return null;
+        }
+        return this.parent.children[index - 1];
+    }
+
+    getRightSibling() {
+        const index = this.parent.children.indexOf(this);
+        if (index === this.parent.children.length - 1) {
+            return null;
+        }
+        return this.parent.children[index + 1];
+    }
+
+    getLeftSiblings() {
+        if (this.isRoot) {
+            return [];
+        }
+        const index = this.parent.children.indexOf(this);
+        return this.parent.children.slice(0, index);
+    }
+
+    getRightSiblings() {
+        if (this.isRoot) {
+            return [];
+        }
+        const index = this.parent.children.indexOf(this);
+        return this.parent.children.slice(index + 1);
+    }
+
+    toggleHideLeftSiblings() {
+        if (this.getLeftSibling().isHidden) {
+            this.unhideLeftSiblings();
+        } else {
+            this.hideLeftSiblings();
+        }
+    }
+
+    toggleHideRightSiblings() {
+        if (this.getRightSibling().isHidden) {
+            this.unhideRightSiblings();
+        } else {
+            this.hideRightSiblings();
+        }
+    }
+
+    hideLeftSiblings() {
+        if (this.isRoot) {
+            return;
+        }
+
+        const leftSiblings = this.getLeftSiblings();
+        if (!leftSiblings.length) return;
+        leftSiblings.forEach(node => node.isHidden = true);
+
+        const leftD3Siblings = leftSiblings.map(node => node.d3Node);
+        const pseudoNode = new PseudoNode(this.parent, leftD3Siblings);
+        const d3PseudoNode = d3.hierarchy(pseudoNode);
+        pseudoNode.d3Node = d3PseudoNode;
+
+        const index = this.parent.d3Node.children.indexOf(this.d3Node);
+        const rightD3Siblings = this.parent.d3Node.children.slice(index + 1);
+        this.parent.d3Node.children = [d3PseudoNode, this.d3Node, ...rightD3Siblings];
+    }
+
+    hideRightSiblings() {
+        if (this.isRoot) {
+            return;
+        }
+
+        const rightSiblings = this.getRightSiblings();
+        if (!rightSiblings.length) return;
+        rightSiblings.forEach(node => node.isHidden = true);
+
+        const rightD3Siblings = rightSiblings.map(node => node.d3Node);
+        const pseudoNode = new PseudoNode(this.parent, rightD3Siblings);
+        const d3PseudoNode = d3.hierarchy(pseudoNode);
+        pseudoNode.d3Node = d3PseudoNode;
+
+        const index = this.parent.d3Node.children.indexOf(this.d3Node);
+        const leftD3Siblings = this.parent.d3Node.children.slice(0, index);
+        this.parent.d3Node.children = [...leftD3Siblings, this.d3Node, d3PseudoNode];
+    }
+
+    unhideLeftSiblings() {
+        if (this.isRoot) {
+            return;
+        }
+
+        const leftSiblings = this.getLeftSiblings();
+        leftSiblings.forEach(node => node.isHidden = false);
+
+        const index = this.parent.d3Node.children.indexOf(this.d3Node);
+        const rightD3Siblings = this.parent.d3Node.children.slice(index + 1);
+        const leftD3Siblings = leftSiblings.map(node => node.d3Node);
+        this.parent.d3Node.children = [...leftD3Siblings, this.d3Node, ...rightD3Siblings];
+    }
+
+    unhideRightSiblings() {
+        if (this.isRoot) {
+            return;
+        }
+
+        const rightSiblings = this.getRightSiblings();
+        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 rightD3Siblings = rightSiblings.map(node => node.d3Node);
+        this.parent.d3Node.children = [...leftD3Siblings, this.d3Node, ...rightD3Siblings];
+    }
+
+    hide() {
+        if (this.isRoot) {
+            return;
+        }
+
+        const index = this.parent.d3Node.children.indexOf(this.d3Node);
+
+        // Check if the d3Node left is also a pseudo-node. If true merge with current one.
+        let leftHiddenD3Nodes = [];
+        let leftIndex = index;
+        if (index !== 0) {
+            const leftD3Node = this.parent.d3Node.children[index - 1];
+            if (leftD3Node.data instanceof PseudoNode) {
+                leftHiddenD3Nodes = leftD3Node.data.hiddenD3Nodes;
+                leftIndex--;
+            }
+        }
+
+        // Check if the d3Node right is also a pseudo-node. If true merge with current one.
+        let rightHiddenD3Nodes = [];
+        let rightIndex = index;
+        if (index !== this.parent.d3Node.children.length - 1) {
+            const rightD3Node = this.parent.d3Node.children[index + 1];
+            if (rightD3Node.data instanceof PseudoNode) {
+                rightHiddenD3Nodes = rightD3Node.data.hiddenD3Nodes;
+                rightIndex++;
+            }
+        }
+
+        const hiddenD3Nodes = [...leftHiddenD3Nodes, this.d3Node, ...rightHiddenD3Nodes];
+
+        const pseudoNode = new PseudoNode(this.parent, hiddenD3Nodes);
+        const d3PseudoNode = d3.hierarchy(pseudoNode);
+        pseudoNode.d3Node = d3PseudoNode;
+
+        const leftD3Siblings = this.parent.d3Node.children.slice(0, leftIndex);
+        const rightD3Siblings = this.parent.d3Node.children.slice(rightIndex + 1);
+
+        this.parent.d3Node.children = [...leftD3Siblings, d3PseudoNode, ...rightD3Siblings];
+        this.isHidden = true;
+    }
+
+    hideAllNodesOnThisLevel() {
+        if (this.getLeftSiblings().length) {
+            this.hideLeftSiblings();
+        }
+        if (this.getRightSiblings().length) {
+            this.hideRightSiblings();
+        }
+    }
+
+    hideAllOtherNodes() {
+        this.collapse();
+        this.getAllNodesToRoot().forEach(node => node.hideAllNodesOnThisLevel());
+    }
+
+    unhideChildren() {
+        if (this.isLeaf()) {
+            return;
+        }
+
+        this.children.forEach(node => node.isHidden = false);
+        this.d3Node.children = this.children.map(node => node.d3Node);
+    }
+
+    insertChildAtIndex(child, index) {
+        // Update d3-parent
+        child.d3Node.parent = this.d3Node;
+        child.parent = this;
+
+        // Update d3-children
+        const d3Children = this.getD3Children();
+        const leftD3Nodes = d3Children.slice(0, index);
+        const rightD3Nodes = d3Children.slice(index);
+        this.d3Node.children = [...leftD3Nodes, child.d3Node, ...rightD3Nodes];
+
+        // Update feature-node-children
+        const leftNodes = this.children.slice(0, index);
+        const rightNodes = this.children.slice(index);
+        this.children = [...leftNodes, child, ...rightNodes];
+    }
+
+    removeChild(child) {
+        this.children = this.children.filter(node => node !== child);
+        this.d3Node.children = this.getD3Children().filter(d3Node => d3Node.data !== child);
+    }
+
+    getD3Children() {
+        return this.children.map(node => node.d3Node);
+    }
+
+    each(func) {
+        func(this);
+        if (!this.isLeaf()) {
+            this.children.forEach(node => node.each(func));
+        }
+    }
+
+    descendants() {
+        if (this.isLeaf()) {
+            return [this];
+        } else {
+            return [this, ...this.children.map(node => node.descendants()).flat()];
+        }
+    }
+
+    markAsEdited() {
+        this.markedAsEdited = true;
+    }
+
+    unmarkAsEdited() {
+        this.markedAsEdited = false;
+    }
+
+    getHighlightedConstraints() {
+        return this.constraints.filter((constraint) => constraint.isHighlighted);
+    }
+
+    highlightConstraints() {
+        this.constraints.forEach((constraint) => constraint.isHighlighted = true);
+    }
+}
+
+export function createFeatureNode(parent, name, groupType, mandatory, abstract) {
+    const node = new FeatureNode(parent, name, groupType, mandatory, abstract);
+    node.d3Node = d3.hierarchy(node);
+    return node;
+}
\ No newline at end of file
diff --git a/frontendVue3/src/classes/PseudoNode.js b/frontendVue3/src/classes/PseudoNode.js
new file mode 100644
index 00000000..ed0a261d
--- /dev/null
+++ b/frontendVue3/src/classes/PseudoNode.js
@@ -0,0 +1,19 @@
+export class PseudoNode {
+    constructor(parent, hiddenD3Nodes) {
+        this.hiddenD3Nodes = hiddenD3Nodes;
+        this.parent = parent;
+        this.d3Node = null;
+    }
+
+    unhideHiddenNodes() {
+        // Unhide every node that is in this pseudo-node.
+        this.hiddenD3Nodes.forEach(d3Node => d3Node.data.isHidden = false);
+
+        // Move every node back to children of parent node.
+        const parentD3Children = this.parent.d3Node.children;
+        const index = parentD3Children.indexOf(this.d3Node);
+        const leftD3Siblings = parentD3Children.slice(0, index);
+        const rightD3Siblings = parentD3Children.slice(index + 1);
+        this.parent.d3Node.children = [...leftD3Siblings, ...this.hiddenD3Nodes, ...rightD3Siblings];
+    }
+}
diff --git a/frontendVue3/src/classes/constants.js b/frontendVue3/src/classes/constants.js
new file mode 100644
index 00000000..dce4a71f
--- /dev/null
+++ b/frontendVue3/src/classes/constants.js
@@ -0,0 +1,73 @@
+export const SVG_MARGIN = {top: 20, right: 90, bottom: 20, left: 90};
+
+export const RECT_MARGIN = {right: 8, left: 8};
+export const RECT_HEIGHT = 35;
+
+export const MONOSPACE_HEIGHT_WIDTH_FACTOR = 0.6;
+export const MANDATORY_CIRCLE_RADIUS = 6;
+export const GROUP_SEGMENT_RADIUS = 25; // Radius of the segment that represents the 'alt' and 'and' groups.
+export const FEATURE_FONT_SIZE = 16;
+export const CHILDREN_COUNT_FONT_SIZE = 7;
+
+export const PSEUDO_NODE_SIZE = 20;
+
+export const GHOST_NODE_RADIUS_MOUSE = 15;
+export const GHOST_NODE_RADIUS_TOUCH = 30;
+
+export const QUICK_EDIT_RADIUS = 5;
+
+export let CONSTRAINT_HIGHLIGHT_COLORS = [
+    '#B762D9',
+    '#FFB17A',
+    '#AEE7C2',
+    '#E2FBC5',
+    '#F3C969',
+    '#37FF8B',
+    '#51D6FF',
+    '#A0AECF',
+    '#F4743B',
+    '#F45B69',
+];
+
+export const COLORING_MAP = [
+    "#4e78b5",
+    "#6694c1",
+    "#80b1cc",
+    "#9dced6",
+    "#c0eade",
+    "#ffffe0",
+    "#eb6574",
+    "#d5405e",
+    "#b81b4a",
+    "#93003a",
+];
+
+export const STROKE_WIDTH_CONSTANT = 4;
+
+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 DISPLAY_NAME_LENGTH = 8;
+export const operators = {
+    imp: "⇒",
+    conj: "∧",
+    disj: "∨",
+    eq: "⇔",
+    not: "¬",
+};
+
+export const EXAMPLE_FEATURE_MODEL_XML = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<featureModel>
+    <properties/>
+        <struct>
+            <and name="Root">
+                <feature mandatory="true" name="Feature A"/>
+                <feature mandatory="false" name="Feature B"/>
+            </and>
+        </struct>
+    <constraints/>
+    <comments/>
+</featureModel>
+`;
diff --git a/frontendVue3/src/components/CollaborationContinueEditingDialog.vue b/frontendVue3/src/components/CollaborationContinueEditingDialog.vue
new file mode 100644
index 00000000..3133c47c
--- /dev/null
+++ b/frontendVue3/src/components/CollaborationContinueEditingDialog.vue
@@ -0,0 +1,34 @@
+<template>
+    <v-dialog v-model="showDialog" persistent width="auto">
+        <v-card>
+            <v-card-title class="text-h5">
+                Do you want to stay and continue editing or close?
+            </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')"
+                    >Continue editing</v-btn
+                >
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+export default {
+    name: 'collaboration-continue-editing-dialog',
+
+    props: {
+        show: Boolean,
+    },
+
+    computed: {
+        showDialog: {
+            get() {
+                return this.show;
+            },
+        },
+    },
+};
+</script>
diff --git a/frontendVue3/src/components/CollaborationNameDialog.vue b/frontendVue3/src/components/CollaborationNameDialog.vue
new file mode 100644
index 00000000..f9015ac4
--- /dev/null
+++ b/frontendVue3/src/components/CollaborationNameDialog.vue
@@ -0,0 +1,61 @@
+<template>
+    <v-dialog v-model="show" persistent width="500">
+        <v-card>
+            <v-card-title class="text-h5">Choose your name</v-card-title>
+
+            <!--			<v-divider></v-divider>-->
+
+            <v-card-text>
+                <v-text-field
+                    class="ma-4"
+                    v-model="name"
+                    :counter="15"
+                    label="Name"
+                    required
+                ></v-text-field>
+            </v-card-text>
+
+            <!--			<v-divider></v-divider>-->
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" @click="setName">Choose name</v-btn>
+                <v-btn text color="primary" @click="() => (this.show = false)"
+                    >Stay Anonymous</v-btn
+                >
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+export default {
+    name: 'collaboration-name-dialog',
+
+    props: {},
+
+    data: () => ({
+        show: true,
+        name: undefined,
+        nameRules: [
+            (v) => !!v || 'Name is required',
+            (v) => v.length <= 15 || 'Name must be less than 10 characters',
+        ],
+    }),
+
+    computed: {
+        showDialog: {
+            get() {
+                return this.show;
+            },
+        },
+    },
+
+    methods: {
+        setName() {
+            this.show = false;
+            this.$emit('change-name', this.name);
+        },
+    },
+};
+</script>
diff --git a/frontendVue3/src/components/CollaborationToolbar.vue b/frontendVue3/src/components/CollaborationToolbar.vue
new file mode 100644
index 00000000..08c9661d
--- /dev/null
+++ b/frontendVue3/src/components/CollaborationToolbar.vue
@@ -0,0 +1,334 @@
+<template>
+    <div
+        :style="
+            $vuetify.breakpoint.smAndDown
+                ? 'position: absolute; top: 0; left: 5rem; width: inherit'
+                : ''
+        "
+    >
+        <v-row
+            class="mt-2"
+            :justify="$vuetify.breakpoint.smAndDown ? 'start' : 'center'"
+            align="center"
+        >
+            <v-btn
+                v-if="$vuetify.breakpoint.mdAndDown"
+                @click="fab = !fab"
+                color="primary"
+                dark
+                small
+                fab
+                class="mr-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'"
+                    elevation="9"
+                    height="auto"
+                    style="border: 2px solid white"
+                >
+                    <div
+                        :style="
+                            $vuetify.breakpoint.smAndDown
+                                ? 'max-width: 20vw'
+                                : 'max-width: 45vw'
+                        "
+                    >
+                        <v-chip-group disabled="true" mandatory>
+                            <v-chip
+                                :class="
+                                    collaborationManager.isClient
+                                        ? 'collaboration-pill-disabled'
+                                        : ''
+                                "
+                                color="primary"
+                                :disabled="collaborationManager.isClient"
+                                @click="
+                                    collaborationManager.sendMemberData(
+                                        collaborationManager.peer._id
+                                    )
+                                "
+                            >
+                                Me ({{ collaborationManager.name }})
+                                <v-icon
+                                    right
+                                    v-if="
+                                        collaborationManager.featureModel
+                                            .editRights
+                                    "
+                                    >mdi-lead-pencil</v-icon
+                                >
+                            </v-chip>
+                            <v-chip
+                                v-for="member in collaborationManager.members"
+                                :key="member.id"
+                                :class="
+                                    collaborationManager.isClient
+                                        ? 'collaboration-pill-disabled'
+                                        : ''
+                                "
+                                :color="
+                                    member.name === 'Host' ? 'success' : 'none'
+                                "
+                                :disabled="collaborationManager.isClient"
+                                @click="
+                                    collaborationManager.sendMemberData(
+                                        member.id
+                                    )
+                                "
+                            >
+                                {{ member.name }}
+                                <v-icon
+                                    right
+                                    v-if="
+                                        collaborationManager.editorId ===
+                                        member.id
+                                    "
+                                    >mdi-lead-pencil</v-icon
+                                >
+                            </v-chip>
+                        </v-chip-group>
+                    </div>
+
+                    <v-tooltip
+                        v-if="
+                            collaborationManager.isClient &&
+                            !collaborationManager.featureModel.editRights &&
+                            !collaborationManager.blockEditRequests
+                        "
+                        bottom
+                    >
+                        <template v-slot:activator="{ on, attrs }">
+                            <v-btn
+                                icon
+                                v-bind="attrs"
+                                v-on="on"
+                                :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 }">
+                            <v-btn
+                                icon
+                                v-bind="attrs"
+                                v-on="on"
+                                :color="
+                                    collaborationManager.blockEditRequests
+                                        ? 'primary'
+                                        : ''
+                                "
+                                @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 }">
+                            <v-btn
+                                icon
+                                v-bind="attrs"
+                                @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 }">
+                            <v-btn
+                                icon
+                                v-bind="attrs"
+                                @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 }">
+                            <v-btn
+                                color="red"
+                                icon
+                                v-bind="attrs"
+                                @click="showCloseDialog = true"
+                                v-on="on"
+                            >
+                                <v-icon>mdi-close</v-icon>
+                            </v-btn>
+                        </template>
+                        <span v-if="collaborationManager.isHost"
+                            >Close session</span
+                        >
+                        <span v-else>Leave session</span>
+                    </v-tooltip>
+                </v-toolbar>
+            </v-slide-x-transition>
+        </v-row>
+
+        <!-- QRCode -->
+        <v-dialog v-model="showQrCode" width="auto">
+            <v-card>
+                <v-card-title>Collaboration</v-card-title>
+                <qrcode-vue
+                    :value="link()"
+                    class="text-center pa-6"
+                    size="300"
+                ></qrcode-vue>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn text color="error" @click="showQrCode = false"
+                        >Close</v-btn
+                    >
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <!-- Close/Leave dialog -->
+        <!--        <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?
+                </v-card-title>
+                <v-card-title class="text-h5" v-else
+                    >Do you really want to leave the collaboration
+                    session?</v-card-title
+                >
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="error" text @click="showCloseDialog = false"
+                        >Cancel</v-btn
+                    >
+                    <v-btn
+                        v-if="collaborationManager.isHost"
+                        color="primary"
+                        text
+                        @click="collaborationManager.closeCollaboration()"
+                        >Close
+                    </v-btn>
+                    <v-btn
+                        v-else
+                        color="primary"
+                        text
+                        @click="collaborationManager.closeCollaboration()"
+                        >Leave</v-btn
+                    >
+                </v-card-actions>
+            </v-card>
+        </v-dialog>-->
+
+        <!-- Claim dialog that is only visible for host -->
+        <!--        <v-dialog v-model="showClaimDialog" persistent width="auto">
+            <v-card>
+                <v-card-title
+                    >"{{ collaborationManager.getClaimerName() }}" wants to
+                    claim edit rights</v-card-title
+                >
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn
+                        color="error"
+                        text
+                        @click="
+                            collaborationManager.sendClaimEditRightsResponse(
+                                false
+                            )
+                        "
+                    >
+                        Disagree
+                    </v-btn>
+
+                    <v-btn
+                        color="primary"
+                        text
+                        @click="
+                            collaborationManager.sendClaimEditRightsResponse(
+                                true
+                            )
+                        "
+                    >
+                        Agree
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>-->
+    </div>
+</template>
+
+<script>
+import QrcodeVue from 'qrcode.vue';
+
+export default {
+    name: 'CollaborationToolbar',
+
+    components: {
+        QrcodeVue,
+    },
+
+    props: {
+        collaborationManager: undefined,
+        showClaimDialog: false,
+    },
+
+    data: () => ({
+        showQrCode: false,
+        showCloseDialog: false,
+        claimButtonClickDisabled: false,
+        fab: true,
+    }),
+
+    methods: {
+        link() {
+            return `${process.env.VUE_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,
+            });
+        },
+
+        claimEditRights() {
+            this.collaborationManager.sendClaimEditRightsRequest();
+            this.claimButtonClickDisabled = true;
+            setTimeout(() => (this.claimButtonClickDisabled = false), 5000);
+        },
+
+        blockEditRequests() {
+            this.collaborationManager.blockEditRequests =
+                !this.collaborationManager.blockEditRequests;
+            this.collaborationManager.sendMemberData();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.collaboration-pill-disabled {
+    opacity: 1;
+}
+</style>
diff --git a/frontendVue3/src/components/ConstraintAddEditDialog.vue b/frontendVue3/src/components/ConstraintAddEditDialog.vue
new file mode 100644
index 00000000..6b9c71c9
--- /dev/null
+++ b/frontendVue3/src/components/ConstraintAddEditDialog.vue
@@ -0,0 +1,229 @@
+<template>
+    <div class="text-center">
+        <v-dialog v-model="showDialog" persistent width="80%">
+            <v-card>
+                <v-card-title class="text-h5">
+                    {{ mode }} Constraint
+                </v-card-title>
+
+                <v-divider></v-divider>
+
+                <v-form @submit.prevent="save">
+                    <v-card-text>
+                        <v-combobox
+                            ref="allNodes"
+                            v-model="selectedFeatureNode"
+                            :items="allNodes"
+                            item-text="name"
+                            label="Select FeatureNode"
+                            @change="
+                                appendFeatureNode(selectedFeatureNode.name)
+                            "
+                        ></v-combobox>
+
+                        <v-row justify="space-between">
+                            <v-col cols="6" sm="auto">
+                                <v-btn
+                                    outlined
+                                    @click="appendText('AND', true, true)"
+                                    >and
+                                </v-btn>
+                            </v-col>
+                            <v-col cols="6" sm="auto">
+                                <v-btn
+                                    outlined
+                                    @click="appendText('OR', true, true)"
+                                    >or
+                                </v-btn>
+                            </v-col>
+                            <v-col cols="6" sm="auto">
+                                <v-btn
+                                    outlined
+                                    @click="appendText('IMPLIES', true, true)"
+                                    >implies
+                                </v-btn>
+                            </v-col>
+                            <v-col cols="6" sm="auto">
+                                <v-btn
+                                    outlined
+                                    @click="appendText('NOT', true, true)"
+                                    >not
+                                </v-btn>
+                            </v-col>
+                            <v-col cols="6" sm="auto">
+                                <v-btn
+                                    outlined
+                                    @click="appendText('(', true, false)"
+                                    >(
+                                </v-btn>
+                            </v-col>
+                            <v-col cols="6" sm="auto">
+                                <v-btn
+                                    outlined
+                                    @click="appendText(')', false, true)"
+                                    >)
+                                </v-btn>
+                            </v-col>
+                        </v-row>
+
+                        <v-row class="my-2">
+                            <v-col class="pt-0" cols="12">
+                                <template>
+                                    <v-text-field
+                                        ref="inputField"
+                                        v-model="constraintText"
+                                        :rules="[
+                                            (value) => !!value || 'Required.',
+                                            (value) =>
+                                                checkParse(value) ||
+                                                this.errorText,
+                                        ]"
+                                        clearable
+                                        hide-details
+                                        label="Constraint"
+                                    ></v-text-field>
+                                    <label v-if="!isValid">
+                                        {{ errorText }}
+                                    </label>
+                                </template>
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+
+                    <v-divider></v-divider>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="secondary" text @click="discard"
+                            >Discard
+                        </v-btn>
+                        <v-btn
+                            :disabled="!isValid"
+                            color="primary"
+                            text
+                            type="submit"
+                            >{{ mode }}
+                        </v-btn>
+                    </v-card-actions>
+                </v-form>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+import { FeatureNode } from '@/classes/FeatureNode';
+import { parse } from '@/services/booleanExpressionParser.service';
+
+export default {
+    name: 'ConstraintAddEditDialog',
+
+    data: () => ({
+        constraintText: '',
+        selectedFeatureNode: '',
+        isValid: false,
+        errorText: '',
+    }),
+
+    props: {
+        show: Boolean,
+        allNodes: [FeatureNode],
+        constraint: undefined,
+        mode: undefined,
+    },
+
+    watch: {
+        constraint() {
+            this.constraintText = this.constraint
+                ? this.constraint.toStringForEdit()
+                : '';
+        },
+    },
+
+    computed: {
+        showDialog: {
+            get() {
+                return this.show;
+            },
+        },
+    },
+
+    methods: {
+        discard() {
+            this.constraintText = '';
+            this.$emit('close');
+        },
+
+        save() {
+            try {
+                const newConstraintItem = parse(
+                    this.constraintText,
+                    this.allNodes
+                );
+                this.constraintText = '';
+                this.$emit('save', newConstraintItem);
+            } catch (e) {
+                console.log(e);
+            }
+        },
+
+        checkParse(value) {
+            try {
+                parse(value, this.allNodes);
+                this.errorText = '';
+                this.isValid = true;
+                return true;
+            } catch (e) {
+                this.errorText = e.message;
+                this.isValid = false;
+                return false;
+            }
+        },
+
+        appendFeatureNode(featureNodeName) {
+            if (!featureNodeName) return;
+            let name = featureNodeName;
+            if (name.split(' ').length > 1) {
+                name = `"${name}"`;
+            }
+            this.appendText(name, true, true);
+        },
+
+        appendText(text, addSpaceBefore, addSpaceAfter) {
+            if (!text) return;
+            this.$refs.allNodes.internalSearch = '';
+            this.$refs.allNodes.internalSearch = '';
+
+            if (!this.constraintText) {
+                this.constraintText = '';
+            }
+
+            // Add space if there do not exist one.
+            const pos = this.$refs.inputField.$refs.input.selectionStart;
+            let textToInsert = '';
+            if (
+                addSpaceBefore &&
+                pos !== 0 &&
+                this.constraintText.length >= pos &&
+                this.constraintText.charAt(pos - 1) !== ' ' &&
+                this.constraintText.charAt(pos - 1) !== '('
+            ) {
+                textToInsert += ' ';
+            }
+            textToInsert += text;
+            if (
+                addSpaceAfter &&
+                this.constraintText.length >= pos + 1 &&
+                this.constraintText.charAt(pos) !== ' '
+            ) {
+                textToInsert += ' ';
+            }
+
+            this.constraintText =
+                this.constraintText.slice(0, pos) +
+                textToInsert +
+                this.constraintText.slice(pos);
+        },
+    },
+};
+</script>
diff --git a/frontendVue3/src/components/Constraints.vue b/frontendVue3/src/components/Constraints.vue
new file mode 100644
index 00000000..cb14ae8b
--- /dev/null
+++ b/frontendVue3/src/components/Constraints.vue
@@ -0,0 +1,251 @@
+<template>
+    <v-bottom-sheet
+        v-model="isOpenDialog"
+        hide-overlay
+        @click:outside="$emit('close')"
+    >
+        <constraint-add-edit-dialog
+            :all-nodes="rootNode ? rootNode.descendants() : undefined"
+            :constraint="constraintAddEdit"
+            :mode="modeAddEdit"
+            :show="showAddEditDialog"
+            @close="closeAddEditDialog"
+            @save="(newConstraint) => save(newConstraint)"
+        ></constraint-add-edit-dialog>
+
+        <v-data-table
+            :key="updateKey"
+            :headers="headers"
+            :items="tableConstraints"
+            :items-per-page="5"
+            :search="search"
+            hide-default-header
+            style="padding: 10px"
+        >
+            <template v-slot:top>
+                <div class="d-flex justify-center align-center">
+                    <v-text-field
+                        v-model="search"
+                        class="mx-4"
+                        label="Search"
+                        prepend-inner-icon="mdi-magnify"
+                    ></v-text-field>
+
+                    <v-btn
+                        icon
+                        outlined
+                        :disabled="!editRights"
+                        class="mr-1"
+                        @click="openAddEditDialog('Add', undefined)"
+                    >
+                        <v-icon :disabled="!editRights">mdi-plus</v-icon>
+                    </v-btn>
+
+                    <v-btn
+                        :disabled="
+                            !commandManager.isUndoAvailable() || !editRights
+                        "
+                        icon
+                        outlined
+                        class="mr-1"
+                        @click="undo"
+                    >
+                        <v-icon>mdi-undo</v-icon>
+                    </v-btn>
+
+                    <v-btn
+                        :disabled="
+                            !commandManager.isRedoAvailable() || !editRights
+                        "
+                        icon
+                        outlined
+                        @click="redo"
+                    >
+                        <v-icon>mdi-redo</v-icon>
+                    </v-btn>
+
+                    <v-btn icon @click="$emit('close')">
+                        <v-icon>mdi-close</v-icon>
+                    </v-btn>
+                </div>
+            </template>
+
+            <template v-slot:item.formula="{ item }">
+                <v-chip
+                    v-model="item.checked"
+                    :color="item.constraint.color"
+                    :style="`color: ${computeColor(item.constraint.color)}`"
+                    @click="highlightConstraint(item)"
+                >
+                    {{ item.formula }}
+                </v-chip>
+            </template>
+
+            <template v-slot:item.actions="{ item }">
+                <v-icon
+                    class="mr-6"
+                    @click="openAddEditDialog('Edit', item.constraint)"
+                    :disabled="!editRights"
+                >
+                    mdi-pencil
+                </v-icon>
+                <v-icon
+                    @click="deleteConstraint(item.constraint)"
+                    :disabled="!editRights"
+                >
+                    mdi-delete
+                </v-icon>
+            </template>
+        </v-data-table>
+    </v-bottom-sheet>
+</template>
+
+<script>
+import ConstraintAddEditDialog from '@/components/ConstraintAddEditDialog';
+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';
+
+export default {
+    name: 'Constraints',
+
+    components: {
+        ConstraintAddEditDialog: ConstraintAddEditDialog,
+    },
+
+    props: {
+        commandManager: CommandManager,
+        constraints: undefined,
+        rootNode: undefined,
+        editRights: undefined,
+        isOpen: Boolean,
+    },
+
+    data: () => ({
+        headers: [
+            { text: 'Constraint', value: 'formula', width: '50%' },
+            { text: 'Actions', value: 'actions', width: '50%' },
+        ],
+        search: '',
+        showAddEditDialog: false,
+        modeAddEdit: undefined,
+        constraintAddEdit: undefined,
+        updateKey: 0,
+    }),
+
+    computed: {
+        isOpenDialog: {
+            get() {
+                return this.isOpen;
+            },
+            set() {},
+        },
+        tableConstraints() {
+            return this.constraints.map((e) => ({
+                constraint: e,
+                formula: e.toString(),
+                checked: false,
+            }));
+        },
+    },
+
+    methods: {
+        highlightConstraint(constraintRow) {
+            constraintRow.checked = !constraintRow.checked;
+            constraintRow.constraint.toggleHighlighted();
+            constraintRow.constraint
+                .getFeatureNodes()
+                .forEach((node) => node.uncollapse());
+            this.$emit('update-feature-model');
+        },
+
+        update() {
+            this.updateKey++;
+        },
+
+        save(newConstraintItem) {
+            let command;
+            if (this.modeAddEdit === 'Add') {
+                command = new AddCommand(this.constraints, newConstraintItem);
+            } else {
+                command = new EditCommand(
+                    this.constraints,
+                    this.constraintAddEdit,
+                    newConstraintItem
+                );
+            }
+            this.closeAddEditDialog();
+            this.commandManager.execute(command);
+        },
+
+        deleteConstraint(constraint) {
+            const command = new DeleteCommand(this.constraints, constraint);
+            this.commandManager.execute(command);
+        },
+
+        computeColor(bg) {
+            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(bg);
+            const rgb = result
+                ? [
+                      parseInt(result[1], 16),
+                      parseInt(result[2], 16),
+                      parseInt(result[3], 16),
+                      // eslint-disable-next-line no-mixed-spaces-and-tabs
+                  ]
+                : null;
+            if (rgb) {
+                if (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114 > 170) {
+                    return '#000';
+                } else {
+                    return '#fff';
+                }
+            } else {
+                if (this.$vuetify.theme.dark) {
+                    return '#fff';
+                }
+                return '#000';
+            }
+        },
+
+        openAddEditDialog(mode, constraint) {
+            this.showAddEditDialog = true;
+            this.modeAddEdit = mode;
+            this.constraintAddEdit = constraint;
+        },
+
+        closeAddEditDialog() {
+            this.showAddEditDialog = false;
+            this.constraintAddEdit = undefined;
+        },
+
+        undo() {
+            this.commandManager.undo();
+        },
+
+        redo() {
+            this.commandManager.redo();
+        },
+    },
+
+    watch: {
+        editRights() {
+            if (!this.editRights) {
+                this.showAddEditDialog = false;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.feature-model-constraints {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: 2rem;
+    min-height: 10%;
+    max-height: 40%;
+    overflow: hidden;
+}
+</style>
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelInformation.vue b/frontendVue3/src/components/FeatureModel/FeatureModelInformation.vue
new file mode 100644
index 00000000..8a7eb784
--- /dev/null
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelInformation.vue
@@ -0,0 +1,53 @@
+<template>
+    <v-alert
+        border="left"
+        class="information-bubble"
+        color="blue accent-4"
+        colored-border
+        elevation="2"
+    >
+        <div class="text-h6">Information</div>
+
+        <v-simple-table>
+            <template v-slot:default>
+                <thead>
+                    <tr>
+                        <th class="text-left">Category</th>
+                        <th class="text-left">Value</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in information" :key="item.category">
+                        <td>{{ item.category }}</td>
+                        <td>{{ item.value }}</td>
+                    </tr>
+                </tbody>
+            </template>
+        </v-simple-table>
+    </v-alert>
+</template>
+
+<script>
+export default {
+    name: 'FeatureModelInformation',
+
+    props: {},
+
+    data: () => ({
+        information: [
+            { category: 'Test 1', value: 'asdasdasd' },
+            { category: 'Test 2', value: true },
+            { category: 'Test 3', value: 1234 },
+        ],
+    }),
+
+    methods: {},
+};
+</script>
+<style lang="scss">
+.information-bubble {
+    position: absolute;
+    bottom: 4rem;
+    right: 2rem;
+}
+</style>
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
new file mode 100644
index 00000000..922cd0f9
--- /dev/null
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTree.vue
@@ -0,0 +1,588 @@
+<template>
+    <div>
+        <div class="float-right mt-2 mr-3" style="position: absolute; right: 0">
+            <v-toolbar
+                floating
+                id="feature-model-search"
+                class="rounded-pill"
+                elevation="9"
+                height="auto"
+                style="border: 2px solid white"
+                width="auto"
+            >
+                <v-btn
+                    :disabled="search.foundNodeIndex === 0"
+                    :small="smAndDown"
+                    icon="mdi-chevron-left"
+                    @click="onChangeFoundNodeIndex(--search.foundNodeIndex)"
+                >
+                </v-btn>
+
+                <v-btn
+                    :disabled="
+                        search.foundNodeDistances.length <=
+                        search.foundNodeIndex + 1
+                    "
+                    :small="smAndDown"
+                    icon="mdi-chevron-right"
+                    @click="onChangeFoundNodeIndex(++search.foundNodeIndex)"
+                >
+                </v-btn>
+                <v-spacer></v-spacer>
+                <v-text-field
+                    v-model="search.searchText"
+                    :class="search.showSearch ? '' : 'closed'"
+                    :dense="smAndDown"
+                    class="px-4 expanding-search"
+                    clearable
+                    hide-details
+                    placeholder="Search"
+                    prepend-inner-icon="mdi-magnify"
+                    single-line
+                    @blur="search.showSearch = false"
+                    @focus="search.showSearch = true"
+                    @input="onChangeSearchText"
+                ></v-text-field>
+
+                <v-badge
+                    v-if="search.foundNodeDistances.length"
+                    :content="
+                        search.foundNodeIndex +
+                        1 +
+                        '/' +
+                        search.foundNodeDistances.length
+                    "
+                    inline
+                ></v-badge>
+
+                <!--				<v-btn icon @click="search.showSearch = !search.showSearch">
+                  <v-icon>mdi-magnify</v-icon>
+                </v-btn>-->
+            </v-toolbar>
+        </div>
+
+        <feature-model-tree-toolbar
+            :collaborationStatus="collaborationStatus"
+            :direction="d3Data.direction"
+            :editRights="editRights"
+            :is-redo-available="
+                commandManager && commandManager.isRedoAvailable()
+            "
+            :is-save-available="
+                (commandManager && commandManager.isUndoAvailable()) ||
+                commandManager.collaborationManager.constraintCommandManager.isUndoAvailable()
+            "
+            :is-undo-available="
+                commandManager && commandManager.isUndoAvailable()
+            "
+            @coloring="(coloringIndex) => coloring(coloringIndex)"
+            @export="$emit('exportToXML')"
+            @fitToView="fitToView"
+            @quickEdit="(value) => updateQuickEdit(value)"
+            @redo="redo"
+            @reset="$emit('reset')"
+            @resetView="(levels, maxChildren) => resetView(levels, maxChildren)"
+            @save="$emit('save')"
+            @semanticEditing="(value) => (d3Data.semanticEditing = value)"
+            @shortName="changeShortName"
+            @spaceBetweenParentChild="changeSpaceBetweenParentChild"
+            @spaceBetweenSiblings="changeSpaceBetweenSiblings"
+            @toggleDirection="toggleDirection"
+            @undo="undo"
+            @show-collaboration-dialog="$emit('show-collaboration-dialog')"
+            @show-tutorial="$emit('show-tutorial')"
+            @new-empty-model="$emit('new-empty-model')"
+        ></feature-model-tree-toolbar>
+
+        <div id="svg-container"></div>
+
+        <feature-model-tree-context-menu
+            :d3Node="d3Data.contextMenu.selectedD3Node"
+            :d3NodeEvent="d3Data.contextMenu.event"
+            :editRights="editRights"
+            @addAsChild="(d3Node) => openAddAsChildDialog(d3Node)"
+            @addAsSibling="(d3Node) => openAddAsSiblingDialog(d3Node)"
+            @close="d3Data.contextMenu.selectedD3Node = undefined"
+            @collapse="collapse"
+            @edit="(d3Node) => openEditDialog(d3Node)"
+            @hideAllNodesOnThisLevel="
+                (d3Node) => hideAllNodesOnThisLevel(d3Node)
+            "
+            @hideAllOtherNodes="(d3Node) => hideAllOtherNodes(d3Node)"
+            @hideCurrentNode="(d3Node) => hideCurrentNode(d3Node)"
+            @hideLeftSiblings="(d3Node) => hideLeftSiblings(d3Node)"
+            @hideRightSiblings="(d3Node) => hideRightSiblings(d3Node)"
+            @highlightConstraints="(d3Node) => highlightConstraints(d3Node)"
+            @resetHighlightConstraints="
+                (d3Node) => resetHighlightConstraints(d3Node)
+            "
+        ></feature-model-tree-context-menu>
+
+        <feature-model-tree-edit-dialog
+            :node="editNode"
+            :show="showEditDialog"
+            @close="showEditDialog = false"
+            @edit="(data) => edit(data)"
+        >
+        </feature-model-tree-edit-dialog>
+
+        <feature-model-tree-add-dialog
+            :parent="
+                d3Data.d3ParentOfAddNode
+                    ? d3Data.d3ParentOfAddNode.data
+                    : undefined
+            "
+            :show="showAddDialog"
+            @add="(data) => add(data)"
+            @close="showAddDialog = false"
+        ></feature-model-tree-add-dialog>
+    </div>
+</template>
+
+<script>
+import FeatureModelTreeToolbar from './FeatureModelTreeToolbar.vue';
+import FeatureModelTreeContextMenu from './FeatureModelTreeContextMenu.vue';
+import FeatureModelTreeEditDialog from './FeatureModelTreeEditDialog.vue';
+import FeatureModelTreeAddDialog from '@/components/FeatureModel/FeatureModelTreeAddDialog';
+// Import feature-model-services
+import * as dragAndDrop from '@/services/FeatureModel/dragAndDrop.service.js';
+import * as update from '@/services/FeatureModel/update.service.js';
+import * as init from '@/services/FeatureModel/init.service.js';
+import * as view from '@/services/FeatureModel/view.service.js';
+import * as search from '@/services/FeatureModel/search.service.js';
+import { CommandManager } from '@/classes/Commands/CommandManager';
+import { AddCommand } from '@/classes/Commands/FeatureModel/AddCommand';
+import { EditCommand } from '@/classes/Commands/FeatureModel/EditCommand';
+import * as update_service from '@/services/FeatureModel/update.service';
+import { useDisplay } from 'vuetify';
+
+export default {
+    name: 'FeatureModelTree',
+
+    components: {
+        FeatureModelTreeToolbar,
+        FeatureModelTreeContextMenu,
+        FeatureModelTreeEditDialog,
+        FeatureModelTreeAddDialog,
+    },
+
+    props: {
+        commandManager: CommandManager,
+        remoteCommands: undefined,
+        rootNode: undefined,
+        constraints: undefined,
+        editRights: undefined,
+        collaborationStatus: undefined,
+    },
+
+    data: () => ({
+        d3Data: {
+            root: undefined,
+            flexLayout: undefined,
+            zoom: undefined,
+            nodeIdCounter: 0,
+            isShortenedName: false,
+            drag: {
+                listener: undefined,
+                hasStarted: false,
+                ghostNodes: [],
+                selectedD3Node: undefined,
+                selectedGhostNode: undefined,
+                selectedD3NodePosition: undefined,
+                mode: 'mouse', // touch or mouse
+            },
+            contextMenu: {
+                selectedD3Node: undefined,
+                event: undefined,
+            },
+            container: {
+                highlightedConstraintsContainer: undefined,
+                linksContainer: undefined,
+                segmentsContainer: undefined,
+                featureNodesContainer: undefined,
+                dragContainer: undefined,
+            },
+            spaceBetweenParentChild: 75,
+            spaceBetweenSiblings: 20,
+            d3ParentOfAddNode: undefined,
+            d3AddNodeIndex: 0,
+            coloringIndex: -1,
+            semanticEditing: false,
+            quickEdit: false,
+            direction: 'v', // h = horizontally, v = vertically
+            maxHorizontallyLevelWidth: [],
+            featureModelTree: undefined,
+        },
+        showAddDialog: false,
+        showEditDialog: false,
+        editNode: undefined,
+        search: {
+            showSearch: false,
+            searchText: undefined,
+            selectedNode: undefined,
+            foundNodeIndex: 0,
+            foundNodeDistances: [],
+        },
+        smAndDown: useDisplay().smAndDown,
+    }),
+
+    mounted() {
+        this.d3Data.featureModelTree = this;
+
+        init.initialize(this.d3Data, this.rootNode);
+        dragAndDrop.init(this.d3Data, this.commandManager);
+        view.reset(this.d3Data);
+
+        this.commandManager.d3Data = this.d3Data;
+        this.commandManager.executeRemoteCommands(
+            this.rootNode,
+            this.constraints
+        );
+        update.updateSvg(this.d3Data);
+    },
+
+    methods: {
+        resetView(levels, maxChildren) {
+            view.reset(this.d3Data, levels, maxChildren);
+        },
+
+        coloring(coloringIndex) {
+            this.d3Data.coloringIndex = coloringIndex;
+            update.updateSvg(this.d3Data);
+        },
+
+        onChangeFoundNodeIndex(index) {
+            if (index < this.search.foundNodeDistances.length) {
+                this.search.selectedNode =
+                    this.search.foundNodeDistances[index].node;
+                search.markNodeAsSearched(
+                    this.d3Data,
+                    this.search.selectedNode
+                );
+            }
+        },
+
+        onChangeSearchText(searchText) {
+            this.search.foundNodeDistances = search.search(
+                this.d3Data,
+                searchText
+            );
+            search.resetSearch(this.d3Data);
+            if (this.search.foundNodeDistances.length) {
+                this.onChangeFoundNodeIndex(0);
+            } else {
+                update.updateSvg(this.d3Data);
+            }
+        },
+
+        updateSvg() {
+            update.updateSvg(this.d3Data);
+        },
+
+        fitToView() {
+            view.zoomFit(this.d3Data);
+        },
+
+        toggleDirection() {
+            this.d3Data.direction = this.d3Data.direction === 'v' ? 'h' : 'v';
+            update.updateSvg(this.d3Data);
+        },
+
+        hideCurrentNode(d3Node) {
+            this.closeContextMenu();
+            d3Node.data.hide();
+            update_service.updateSvg(this.d3Data);
+            view.focusNode(this.d3Data, d3Node);
+        },
+
+        hideRightSiblings(d3Node) {
+            this.closeContextMenu();
+            d3Node.data.toggleHideRightSiblings();
+            update_service.updateSvg(this.d3Data);
+            view.focusNode(this.d3Data, d3Node);
+        },
+
+        hideLeftSiblings(d3Node) {
+            this.closeContextMenu();
+            d3Node.data.toggleHideLeftSiblings();
+            update_service.updateSvg(this.d3Data);
+            view.focusNode(this.d3Data, d3Node);
+        },
+
+        hideAllOtherNodes(d3Node) {
+            this.closeContextMenu();
+            d3Node.data.hideAllOtherNodes();
+            update_service.updateSvg(this.d3Data);
+            view.focusNode(this.d3Data, d3Node);
+        },
+
+        hideAllNodesOnThisLevel(d3Node) {
+            this.closeContextMenu();
+            d3Node.data.hideAllNodesOnThisLevel();
+            update_service.updateSvg(this.d3Data);
+            view.focusNode(this.d3Data, d3Node);
+        },
+
+        closeContextMenu() {
+            this.d3Data.contextMenu.selectedD3Node = null;
+        },
+
+        collapse(d3Node) {
+            this.closeContextMenu();
+            d3Node.data.toggleCollapse();
+            update.updateSvg(this.d3Data);
+        },
+
+        edit(newData) {
+            this.showEditDialog = false;
+
+            const editCommand = new EditCommand(this.editNode, newData);
+            this.commandManager.execute(editCommand);
+            update.updateSvg(this.d3Data);
+        },
+
+        changeShortName(isShortName) {
+            this.d3Data.isShortenedName = isShortName;
+            update.updateSvg(this.d3Data);
+        },
+
+        changeSpaceBetweenParentChild(spacing) {
+            this.d3Data.spaceBetweenParentChild = spacing;
+            update.updateSvg(this.d3Data);
+        },
+
+        changeSpaceBetweenSiblings(spacing) {
+            this.d3Data.spaceBetweenSiblings = spacing;
+            update.updateSvg(this.d3Data);
+        },
+
+        add(newNode) {
+            this.showAddDialog = false;
+
+            const parent = this.d3Data.d3ParentOfAddNode.data;
+            const addCommand = new AddCommand(
+                parent,
+                this.d3Data.d3AddNodeIndex,
+                newNode
+            );
+            this.commandManager.execute(addCommand);
+            update.updateSvg(this.d3Data);
+        },
+
+        openAddAsChildDialog(d3Node) {
+            this.d3Data.d3ParentOfAddNode = d3Node;
+            this.showAddDialog = true;
+        },
+
+        openAddAsSiblingDialog(d3Node) {
+            this.d3Data.d3ParentOfAddNode = d3Node.parent;
+            this.showAddDialog = true;
+        },
+
+        openEditDialog(d3Node) {
+            this.closeContextMenu();
+            this.editNode = d3Node.data;
+            this.showEditDialog = true;
+        },
+
+        undo() {
+            this.commandManager.undo();
+            update.updateSvg(this.d3Data);
+        },
+
+        redo() {
+            this.commandManager.redo();
+            update.updateSvg(this.d3Data);
+        },
+
+        highlightConstraints(d3Node) {
+            d3Node.data.constraints.forEach((constraint) =>
+                constraint.highlight()
+            );
+            update.updateSvg(this.d3Data);
+            this.updateConstraints();
+        },
+
+        resetHighlightConstraints(d3Node) {
+            d3Node.data.constraints.forEach((constraint) =>
+                constraint.resetHighlight()
+            );
+            update.updateSvg(this.d3Data);
+            this.updateConstraints();
+        },
+
+        updateConstraints() {
+            this.$emit('update-constraints');
+        },
+
+        updateQuickEdit(newValue) {
+            this.d3Data.quickEdit = newValue;
+            this.updateSvg();
+        },
+    },
+
+    computed: {
+        allNodes() {
+            if (this.d3Data.root) {
+                return this.d3Data.root.data.descendants();
+            } else {
+                return [];
+            }
+        },
+    },
+
+    watch: {
+        editRights() {
+            if (!this.editRights) {
+                this.showAddDialog = false;
+                this.showEditDialog = false;
+            }
+
+            this.updateSvg();
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.ghost-circle {
+    fill: red;
+    fill-opacity: 0.2;
+}
+
+.ghost-circle-highlighted {
+    fill-opacity: 0.8;
+}
+
+#svg-container {
+    width: 100%;
+    height: calc(100vh - 64px);
+}
+
+.node {
+    cursor: pointer;
+    vertical-align: middle;
+
+    .is-searched-feature {
+        fill: lightcoral;
+    }
+
+    rect {
+        transition: all 0.75s;
+        stroke: #888;
+        stroke-width: 1px;
+    }
+
+    text {
+        /* fill: black; */
+        font-family: monospace;
+        text-anchor: middle;
+        user-select: none;
+    }
+}
+
+.and-group-circle {
+    stroke: #888;
+    stroke-width: 1.5px;
+    opacity: 0;
+}
+
+.optional-and-group-circle {
+    fill: white;
+    opacity: 1;
+}
+
+.mandatory-and-group-circle {
+    fill: rgb(136, 136, 136);
+    opacity: 1;
+}
+
+.alt-group {
+    fill: white;
+    stroke: #888;
+    stroke-width: 1.5px;
+}
+
+.or-group {
+    fill: #888;
+    stroke: #888;
+    stroke-width: 1.5px;
+}
+
+.link {
+    fill: none;
+    stroke: #888;
+    stroke-width: 1.5px;
+}
+
+.is-searched-link {
+    fill: none;
+    stroke: lightcoral;
+    stroke-width: 1.5px;
+}
+
+.children-count > circle {
+    fill: white;
+    stroke: #888;
+    stroke-width: 1.5px;
+}
+
+.pseudo-node {
+    cursor: pointer;
+    vertical-align: middle;
+
+    > circle {
+        fill: white;
+        stroke: #888;
+        stroke-width: 1.5px;
+    }
+}
+
+.feature-model-constraints {
+    position: absolute;
+    background-color: white;
+    bottom: 0;
+    width: 100%;
+    box-shadow: 0 10px 10px #888, 0px -10px 10px #888;
+    padding: 2rem;
+    min-height: 10%;
+    max-height: 20%;
+    overflow: scroll;
+}
+
+polygon {
+    stroke: #888;
+}
+
+.children-count-text {
+    fill: black !important;
+}
+
+.blackText {
+    fill: black !important;
+}
+
+.whiteText {
+    fill: white !important;
+}
+
+.v-input.expanding-search {
+    width: 250px;
+    transition: width 1.5s;
+    float: right;
+
+    .v-icon {
+        cursor: pointer;
+    }
+
+    &.closed {
+        max-width: 90px;
+
+        & .v-input__slot {
+            &::before {
+                border: 0px;
+            }
+        }
+    }
+}
+</style>
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTreeAddDialog.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTreeAddDialog.vue
new file mode 100644
index 00000000..fcd5f188
--- /dev/null
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTreeAddDialog.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="text-center">
+        <v-dialog v-model="showDialog" persistent width="500">
+            <v-card>
+                <v-card-title class="text-h5"> Add Feature </v-card-title>
+
+                <v-divider></v-divider>
+
+                <v-form @submit.prevent="add" ref="form">
+                    <v-card-text>
+                        <div>
+                            <v-text-field
+                                v-model="name"
+                                :rules="[(value) => !!value || 'Required.']"
+                                label="Name"
+                            ></v-text-field>
+                        </div>
+
+                        <div v-if="showMandatorySelection" class="my-2">
+                            <v-btn-toggle
+                                v-model="mandatory"
+                                dense
+                                color="primary"
+                                tile
+                                mandatory
+                            >
+                                <v-btn text> mandatory</v-btn>
+                                <v-btn text> optional</v-btn>
+                            </v-btn-toggle>
+                        </div>
+
+                        <v-checkbox
+                            v-model="abstract"
+                            hide-details
+                            label="Abstract"
+                        ></v-checkbox>
+                    </v-card-text>
+
+                    <v-divider></v-divider>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="secondary" text @click="discard">
+                            Discard</v-btn
+                        >
+                        <v-btn
+                            :disabled="!name"
+                            color="primary"
+                            text
+                            type="submit"
+                        >
+                            Add</v-btn
+                        >
+                    </v-card-actions>
+                </v-form>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FeatureModelTreeAddDialog',
+
+    data: () => ({
+        name: '',
+        mandatory: false,
+        abstract: false,
+    }),
+
+    props: {
+        parent: Object,
+        show: Boolean,
+    },
+
+    computed: {
+        showDialog: {
+            get() {
+                return this.show;
+            },
+        },
+
+        showMandatorySelection() {
+            if (this.parent) {
+                return this.parent.isAnd();
+            }
+            return false;
+        },
+    },
+
+    methods: {
+        discard() {
+            this.name = '';
+            this.mandatory = false;
+            this.abstract = false;
+
+            this.$emit('close');
+
+            // to reset form validation and error messages
+            this.$refs.form.reset();
+        },
+
+        add() {
+            const data = {
+                name: this.name,
+                groupType: 'and',
+                mandatory: this.mandatory === 0,
+                abstract: this.abstract,
+            };
+            this.name = '';
+            this.mandatory = false;
+            this.abstract = false;
+            this.$emit('add', data, this.parent);
+
+            // to reset form validation and error messages
+            this.$refs.form.reset();
+        },
+    },
+};
+</script>
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTreeContextMenu.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTreeContextMenu.vue
new file mode 100644
index 00000000..069eb826
--- /dev/null
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTreeContextMenu.vue
@@ -0,0 +1,179 @@
+<template>
+    <v-menu
+        v-model="show"
+        :close-on-click="true"
+        :close-on-content-click="false"
+        :style="`left: ${d3NodeEvent ? d3NodeEvent.pageX + 'px' : '0'};top: ${
+            d3NodeEvent ? d3NodeEvent.pageY + 'px' : '0'
+        }`"
+        max-height="80%"
+        absolute
+        offset-y
+        transition="scroll-y-transition"
+    >
+        <v-list>
+            <v-list-item
+                :disabled="
+                    d3Node && !d3Node.children && !d3Node.collapsedChildren
+                "
+                @click="$emit('collapse', d3Node)"
+                prepend-icon="mdi-arrow-collapse-all"
+            >
+                <v-list-item-title>Collapse</v-list-item-title>
+            </v-list-item>
+
+            <v-divider></v-divider>
+
+            <v-list-group no-action prepend-icon="mdi-eye-off">
+                <template v-slot:activator="{ props }">
+                    <v-list-item v-bind="props">
+                        <v-list-item-title> Hide Nodes</v-list-item-title>
+                    </v-list-item>
+                </template>
+
+                <v-list-item
+                    :disabled="
+                        !(
+                            d3Node &&
+                            d3Node.parent &&
+                            d3Node.parent.children &&
+                            d3Node.parent.children.length > 1 &&
+                            d3Node.parent.children[0].data.name !==
+                                d3Node.data.name
+                        )
+                    "
+                    @click="$emit('hideLeftSiblings', d3Node)"
+                >
+                    <v-list-item-title>Hide left siblings</v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                    :disabled="
+                        !(
+                            d3Node &&
+                            d3Node.parent &&
+                            d3Node.parent.children &&
+                            d3Node.parent.children.length > 1 &&
+                            d3Node.parent.children[
+                                d3Node.parent.children.length - 1
+                            ].data.name !== d3Node.data.name
+                        )
+                    "
+                    @click="$emit('hideRightSiblings', d3Node)"
+                >
+                    <v-list-item-title>Hide right siblings</v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                    :disabled="d3Node && d3Node.data && d3Node.data.isRoot"
+                    @click="$emit('hideCurrentNode', d3Node)"
+                >
+                    <v-list-item-title>Hide current node</v-list-item-title>
+                </v-list-item>
+
+                <v-list-item @click="$emit('hideAllOtherNodes', d3Node)">
+                    <v-list-item-title>
+                        Hide all other nodes on every level
+                    </v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                    :disabled="d3Node && d3Node.data && d3Node.data.isRoot"
+                    @click="$emit('hideAllNodesOnThisLevel', d3Node)"
+                >
+                    <v-list-item-title>
+                        Hide all other siblings on this level
+                    </v-list-item-title>
+                </v-list-item>
+            </v-list-group>
+
+            <v-divider></v-divider>
+
+            <v-list-item
+                :disabled="
+                    !(
+                        d3Node &&
+                        d3Node.data.constraints &&
+                        d3Node.data.constraints.length
+                    )
+                "
+                @click="$emit('highlightConstraints', d3Node)"
+            >
+                <v-list-item-title>Highlight constraints</v-list-item-title>
+            </v-list-item>
+
+            <v-list-item
+                :disabled="
+                    !(
+                        d3Node &&
+                        d3Node.data.constraints &&
+                        d3Node.data.constraints.length
+                    )
+                "
+                @click="$emit('resetHighlightConstraints', d3Node)"
+            >
+                <v-list-item-title
+                    >Reset highlight constraints</v-list-item-title
+                >
+            </v-list-item>
+
+            <v-divider v-if="editRights"></v-divider>
+
+            <v-list-item
+                v-if="editRights"
+                @click="$emit('edit', d3Node)"
+                prepend-icon="mdi-pencil"
+            >
+                <v-list-item-title>Edit</v-list-item-title>
+            </v-list-item>
+
+            <v-list-group v-if="editRights" no-action prepend-icon="mdi-plus">
+                <template v-slot:activator="{ props }">
+                    <v-list-item v-bind="props">
+                        <v-list-item-title>Add</v-list-item-title>
+                    </v-list-item>
+                </template>
+
+                <v-list-item @click="$emit('addAsChild', d3Node)">
+                    <v-list-item-title>Add as child</v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                    :disabled="d3Node && d3Node.data.isRoot"
+                    @click="$emit('addAsSibling', d3Node)"
+                >
+                    <v-list-item-title>Add as sibling</v-list-item-title>
+                </v-list-item>
+            </v-list-group>
+        </v-list>
+    </v-menu>
+</template>
+
+<script>
+export default {
+    name: 'FeatureModelTreeContextMenu',
+
+    props: {
+        d3Node: undefined,
+        d3NodeEvent: undefined,
+        editRights: undefined,
+    },
+
+    computed: {
+        show: {
+            get() {
+                return !!this.d3Node;
+            },
+            set() {
+                this.$emit('close');
+            },
+        },
+    },
+};
+</script>
+
+<style scoped>
+.v-list-item:not(.v-list-item--disabled) {
+    cursor: pointer;
+}
+</style>
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTreeEditDialog.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTreeEditDialog.vue
new file mode 100644
index 00000000..ed255de8
--- /dev/null
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTreeEditDialog.vue
@@ -0,0 +1,189 @@
+<template>
+    <div class="text-center">
+        <v-dialog v-model="showDialog" persistent width="500">
+            <v-card>
+                <v-card-title class="text-h5"> Edit Feature</v-card-title>
+
+                <v-divider></v-divider>
+
+                <v-form @submit.prevent="save">
+                    <v-card-text>
+                        <div>
+                            <v-text-field
+                                v-model="name"
+                                :rules="[(value) => !!value || 'Required.']"
+                                label="Name"
+                            ></v-text-field>
+                        </div>
+
+                        <div v-if="showGroupTypeSelection" class="my-2">
+                            <v-btn-toggle
+                                v-model="convertGroupType"
+                                dense
+                                color="primary"
+                                tile
+                                mandatory
+                            >
+                                <v-btn text>⊻ alt</v-btn>
+                                <v-btn text>∨ or</v-btn>
+                                <v-btn text>∧ and</v-btn>
+                            </v-btn-toggle>
+                        </div>
+
+                        <div v-if="showMandatorySelection" class="my-2">
+                            <v-btn-toggle
+                                v-model="convertMandatory"
+                                dense
+                                tile
+                                color="primary"
+                                mandatory
+                            >
+                                <v-btn text> mandatory</v-btn>
+                                <v-btn text> optional</v-btn>
+                            </v-btn-toggle>
+                        </div>
+
+                        <v-checkbox
+                            v-model="abstract"
+                            hide-details
+                            label="Abstract"
+                        ></v-checkbox>
+                    </v-card-text>
+
+                    <v-divider></v-divider>
+
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="secondary" text @click="discard">
+                            Discard
+                        </v-btn>
+                        <v-btn
+                            :disabled="!name"
+                            color="primary"
+                            text
+                            type="submit"
+                        >
+                            Edit</v-btn
+                        >
+                    </v-card-actions>
+                </v-form>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FeatureModelTreeEditDialog',
+
+    data: () => ({
+        name: undefined,
+        groupType: undefined,
+        mandatory: undefined,
+        abstract: undefined,
+    }),
+
+    props: {
+        node: Object,
+        show: Boolean,
+    },
+
+    watch: {
+        show() {
+            if (this.node) {
+                this.name = this.node.name;
+                this.groupType = this.node.groupType;
+                this.mandatory = this.node.isMandatory;
+                this.abstract = this.node.isAbstract;
+            }
+        },
+    },
+
+    computed: {
+        showDialog: {
+            get() {
+                return this.show;
+            },
+        },
+
+        convertGroupType: {
+            get() {
+                switch (this.groupType) {
+                    case 'alt':
+                        return 0;
+                    case 'or':
+                        return 1;
+                    case 'and':
+                        return 2;
+                    default:
+                        return 0;
+                }
+            },
+            set(newValue) {
+                switch (newValue) {
+                    case 0:
+                        this.groupType = 'alt';
+                        break;
+                    case 1:
+                        this.groupType = 'or';
+                        break;
+                    case 2:
+                        this.groupType = 'and';
+                        break;
+                    default:
+                        this.groupType = 'alt';
+                        break;
+                }
+            },
+        },
+
+        convertMandatory: {
+            get() {
+                if (this.node) {
+                    return this.mandatory ? 0 : 1;
+                }
+                return 0;
+            },
+            set(newValue) {
+                this.mandatory = newValue === 0;
+            },
+        },
+
+        showMandatorySelection() {
+            if (this.node) {
+                return !this.node.isRoot && this.node.parent.isAnd();
+            }
+            return false;
+        },
+
+        showGroupTypeSelection() {
+            if (this.node) {
+                return !this.node.isLeaf();
+            }
+            return false;
+        },
+    },
+
+    methods: {
+        discard() {
+            this.name = '';
+            this.groupType = '';
+            this.mandatory = false;
+            this.abstract = false;
+
+            this.$emit('close');
+        },
+
+        save() {
+            const data = {
+                name: this.name,
+                groupType: this.groupType,
+                mandatory: this.mandatory,
+                abstract: this.abstract,
+            };
+
+            this.$emit('edit', data);
+        },
+    },
+};
+</script>
diff --git a/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
new file mode 100644
index 00000000..f01da8bc
--- /dev/null
+++ b/frontendVue3/src/components/FeatureModel/FeatureModelTreeToolbar.vue
@@ -0,0 +1,396 @@
+<template>
+    <div>
+        <v-navigation-drawer
+            v-model="drawer"
+            rail
+            expand-on-hover
+            absolute
+            permanent
+            location="start"
+        >
+            <v-list dense>
+                <v-list-item
+                    @click="$emit('new-empty-model')"
+                    prepend-icon="mdi-file-document-plus-outline"
+                >
+                    <v-list-item-title>New empty model</v-list-item-title>
+                </v-list-item>
+
+                <v-dialog v-model="saveDialog" persistent width="400">
+                    <template v-slot:activator="{ props }">
+                        <v-list-item
+                            v-bind="props"
+                            :prepend-icon="
+                                !isSaveAvailable
+                                    ? 'mdi-content-save'
+                                    : 'mdi-content-save-edit'
+                            "
+                            id="feature-model-toolbar-save"
+                        >
+                            <v-list-item-title>Save</v-list-item-title>
+                        </v-list-item>
+                    </template>
+
+                    <v-card>
+                        <v-card-title>Save?</v-card-title>
+                        <v-card-text>
+                            Do you really want to overwrite the feature-model
+                            currently saved in local storage?
+                        </v-card-text>
+                        <v-card-actions>
+                            <v-spacer></v-spacer>
+                            <v-btn
+                                text
+                                color="error"
+                                @click="saveDialog = false"
+                            >
+                                Cancel
+                            </v-btn>
+                            <v-btn
+                                color="primary"
+                                text
+                                @click="
+                                    () => {
+                                        $emit('save');
+                                        this.saveDialog = false;
+                                    }
+                                "
+                            >
+                                Save
+                            </v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+
+                <v-dialog
+                    v-model="discardChangesConfirmDialog"
+                    persistent
+                    width="400"
+                >
+                    <template v-slot:activator="{ props }">
+                        <v-list-item
+                            :disabled="!isUndoAvailable || !editRights"
+                            v-bind="props"
+                            prepend-icon="mdi-backup-restore"
+                        >
+                            <v-list-item-title>
+                                Discard changes
+                            </v-list-item-title>
+                        </v-list-item>
+                    </template>
+
+                    <v-card>
+                        <v-card-title>Discard changes?</v-card-title>
+                        <v-card-text
+                            >Do you really want to discard all changes? This
+                            action can't be undone!
+                        </v-card-text>
+                        <v-card-actions>
+                            <v-spacer></v-spacer>
+                            <v-btn
+                                color="primary"
+                                text
+                                @click="discardChangesConfirmDialog = false"
+                                >Cancel
+                            </v-btn>
+                            <v-btn color="primary" text @click="$emit('reset')"
+                                >Discard
+                            </v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
+
+                <v-list-item
+                    :disabled="!isUndoAvailable || !editRights"
+                    @click="$emit('undo')"
+                    prepend-icon="mdi-undo"
+                >
+                    <v-list-item-title>Undo</v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                    :disabled="!isRedoAvailable || !editRights"
+                    @click="$emit('redo')"
+                    prepend-icon="mdi-redo"
+                >
+                    <v-list-item-title>Redo</v-list-item-title>
+                </v-list-item>
+
+                <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>
+                        </v-list-item>
+                    </template>
+                    <v-list>
+                        <v-list-item
+                            v-for="(item, i) in itemsColoring"
+                            :key="i"
+                            @click="selectedColoring(item)"
+                        >
+                            <v-list-item-content>
+                                <v-list-item-title
+                                    v-text="item"
+                                ></v-list-item-title>
+                            </v-list-item-content>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+
+                <v-menu offset-y :close-on-content-click="false">
+                    <template v-slot:activator="{ props }">
+                        <v-list-item v-bind="props" prepend-icon="mdi-eye">
+                            <v-list-item-title> View </v-list-item-title>
+                        </v-list-item>
+                    </template>
+                    <v-list>
+                        <v-list-subheader>View</v-list-subheader>
+
+                        <v-list-item
+                            class="clickable"
+                            @click="$emit('fitToView')"
+                        >
+                            <v-list-item-title> Fit to view </v-list-item-title>
+                        </v-list-item>
+                        <v-list-item
+                            class="clickable"
+                            @click="$emit('toggleDirection')"
+                        >
+                            <v-list-item-title>
+                                {{
+                                    direction === 'v'
+                                        ? 'Change direction to horizontally'
+                                        : 'Change direction to vertically'
+                                }}
+                            </v-list-item-title>
+                        </v-list-item>
+                        <v-list-item
+                            class="clickable"
+                            @click="$emit('resetView', levels, maxChildren)"
+                        >
+                            <v-list-item-title> Reset view </v-list-item-title>
+                        </v-list-item>
+                        <v-list-item
+                            class="clickable"
+                            @click="$store.commit('openConstraints', true)"
+                        >
+                            <v-list-item-title>
+                                Show Constraints
+                            </v-list-item-title>
+                        </v-list-item>
+                        <v-list-item>
+                            <template v-slot:prepend="{ active }">
+                                <v-list-item-action start>
+                                    <v-checkbox-btn
+                                        v-model="isShortName"
+                                        :input-value="active"
+                                        color="primary"
+                                    ></v-checkbox-btn>
+                                </v-list-item-action>
+
+                                <v-list-item-title>
+                                    Short Name
+                                </v-list-item-title>
+                            </template>
+                        </v-list-item>
+                        <v-list-subheader>
+                            Space parent -> child</v-list-subheader
+                        >
+                        <v-list-item>
+                            <v-slider
+                                v-model="spaceBetweenParentChild"
+                                hide-details
+                                max="300"
+                                min="40"
+                                style="width: 200px"
+                            ></v-slider>
+                        </v-list-item>
+                        <v-list-subheader
+                            >Space between siblings</v-list-subheader
+                        >
+                        <v-list-item>
+                            <v-slider
+                                v-model="spaceBetweenSiblings"
+                                hide-details
+                                max="300"
+                                min="5"
+                                style="width: 200px"
+                            ></v-slider>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+
+                <v-list-item
+                    @click="$emit('export')"
+                    prepend-icon="mdi-export-variant"
+                >
+                    <v-list-item-title>Export as XML</v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                    :disabled="collaborationStatus"
+                    @click="$emit('show-collaboration-dialog')"
+                    id="feature-model-toolbar-collaboration"
+                    prepend-icon="mdi-account-multiple"
+                >
+                    <v-list-item-title>Collaboration</v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                    @click="$emit('show-tutorial')"
+                    id="tutorial-mode"
+                    prepend-icon="mdi-school"
+                >
+                    <v-list-item-title>Tutorial</v-list-item-title>
+                </v-list-item>
+
+                <v-menu :close-on-content-click="false" offset-y>
+                    <template v-slot:activator="{ props }">
+                        <v-list-item
+                            v-bind="props"
+                            id="feature-model-toolbar-other-settings"
+                            prepend-icon="mdi-dots-vertical"
+                        >
+                            <v-list-item-title>Settings</v-list-item-title>
+                        </v-list-item>
+                    </template>
+                    <v-list>
+                        <v-list-subheader>Adjust Levels</v-list-subheader>
+
+                        <v-list-item>
+                            <v-text-field
+                                v-model="levels"
+                                class="mt-0 pt-0"
+                                min="0"
+                                type="number"
+                                @change="
+                                    $emit('resetView', levels, maxChildren)
+                                "
+                            ></v-text-field>
+                        </v-list-item>
+                        <v-list-subheader>Adjust Max Children</v-list-subheader>
+
+                        <v-list-item>
+                            <v-text-field
+                                v-model="maxChildren"
+                                class="mt-0 pt-0"
+                                min="0"
+                                type="number"
+                                @change="
+                                    $emit('resetView', levels, maxChildren)
+                                "
+                            ></v-text-field>
+                        </v-list-item>
+
+                        <v-list-item>
+                            <template v-slot:prepend="{ active }">
+                                <v-list-item-action start>
+                                    <v-checkbox-btn
+                                        v-model="semanticEditing"
+                                        :input-value="active"
+                                        color="primary"
+                                    ></v-checkbox-btn>
+                                </v-list-item-action>
+
+                                <v-list-item-title>
+                                    Semantic editing
+                                </v-list-item-title>
+                            </template>
+                        </v-list-item>
+                        <v-list-item>
+                            <template v-slot:prepend="{ active }">
+                                <v-list-item-action start>
+                                    <v-checkbox-btn
+                                        v-model="quickEdit"
+                                        :input-value="active"
+                                        color="primary"
+                                    ></v-checkbox-btn>
+                                </v-list-item-action>
+
+                                <v-list-item-title>
+                                    Quick edit
+                                </v-list-item-title>
+                            </template>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </v-list>
+        </v-navigation-drawer>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FeatureModelTreeToolbar',
+
+    components: {},
+
+    props: {
+        isUndoAvailable: Boolean,
+        isRedoAvailable: Boolean,
+        isSaveAvailable: Boolean,
+        direction: String,
+        editRights: undefined,
+        collaborationStatus: undefined,
+    },
+
+    data: () => ({
+        selectedView: undefined,
+        levels: 4,
+        maxChildren: 3,
+        spaceBetweenParentChild: 75,
+        spaceBetweenSiblings: 20,
+        itemsColoring: ['Count', 'Direct Children', 'Total Children'],
+        isShortName: false,
+        semanticEditing: false,
+        quickEdit: false,
+        drawer: true,
+        discardChangesConfirmDialog: false,
+        saveDialog: false,
+    }),
+
+    watch: {
+        isShortName: function (newValue) {
+            this.$emit('shortName', newValue);
+        },
+        spaceBetweenParentChild: function (newValue) {
+            this.$emit('spaceBetweenParentChild', newValue);
+        },
+        spaceBetweenSiblings: function (newValue) {
+            this.$emit('spaceBetweenSiblings', newValue);
+        },
+        levels: function (newValue) {
+            this.$emit('levels', newValue);
+        },
+        maxChilds: function (newValue) {
+            this.$emit('maxChilds', newValue);
+        },
+        semanticEditing: function (newValue) {
+            this.$emit('semanticEditing', newValue);
+        },
+        quickEdit: function (newValue) {
+            this.$emit('quickEdit', newValue);
+        },
+    },
+
+    computed: {},
+
+    methods: {
+        selectedColoring(newValue) {
+            this.$emit('coloring', newValue);
+        },
+    },
+};
+</script>
+
+<style scoped>
+.clickable {
+    cursor: pointer;
+}
+
+@media only screen and (max-width: 1800px) {
+    .v-toolbar {
+        width: 100%;
+    }
+}
+</style>
diff --git a/frontendVue3/src/router/index.js b/frontendVue3/src/router/index.js
index 46fa8e15..1a453c1c 100644
--- a/frontendVue3/src/router/index.js
+++ b/frontendVue3/src/router/index.js
@@ -47,6 +47,13 @@ const routes = [
             title: 'File Detail',
         },
     },
+    {
+        path: '/feature-model/:id',
+        name: 'FeatureModel',
+        props: true,
+        component: () =>
+            import(/* webpackChunkName: "home" */ '@/views/FeatureModel.vue'),
+    },
 ];
 
 const router = createRouter({
diff --git a/frontendVue3/src/views/FeatureModel.vue b/frontendVue3/src/views/FeatureModel.vue
new file mode 100644
index 00000000..4eccec64
--- /dev/null
+++ b/frontendVue3/src/views/FeatureModel.vue
@@ -0,0 +1,245 @@
+<template>
+    <div>
+        <feature-model-tree
+            v-if="data.rootNode"
+            :key="reloadKey"
+            ref="featureModelTree"
+            :collaborationStatus="collaborationStatus"
+            :command-manager="featureModelCommandManager"
+            :constraints="data.constraints"
+            :editRights="editRights"
+            :rootNode="data.rootNode"
+            @exportToXML="exportToXML"
+            @reset="reset"
+            @save="save"
+            @update-constraints="updateConstraints"
+            @show-collaboration-dialog="
+                showStartCollaborationSessionDialog = true
+            "
+            @show-claim-dialog="showClaimDialog"
+            @new-empty-model="newEmptyModel"
+            @show-tutorial="showTutorial = true"
+        >
+        </feature-model-tree>
+    </div>
+</template>
+
+<script>
+import FeatureModelTree from '../components/FeatureModel/FeatureModelTree.vue';
+import Constraints from '../components/Constraints.vue';
+import * as update from '@/services/FeatureModel/update.service';
+import api from '@/services/api.service';
+import beautify from 'xml-beautifier';
+import CollaborationManager from '@/classes/CollaborationManager';
+import { CommandManager } from '@/classes/Commands/CommandManager';
+import * as xmlTranspiler from '@/services/xmlTranspiler.service';
+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 TutorialMode from '@/components/TutorialMode';
+import { NewEmptyModelCommand } from '@/classes/Commands/FeatureModel/NewEmptyModelCommand';
+import FeatureModelInformation from '@/components/FeatureModel/FeatureModelInformation';
+import { useAppStore } from '@/store/app';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const appStore = useAppStore();
+
+export default {
+    name: 'FeatureModel',
+
+    components: {
+        TutorialMode,
+        FeatureModelInformation,
+        CollaborationContinueEditingDialog,
+        CollaborationToolbar,
+        FeatureModelTree,
+        Constraints,
+        CollaborationNameDialog,
+    },
+
+    props: {
+        id: undefined,
+        collaborationKey: undefined,
+    },
+
+    data() {
+        return {
+            data: {
+                featureMap: [],
+                constraints: [],
+                properties: [],
+                calculations: undefined,
+                comments: [],
+                featureOrder: undefined,
+                rootNode: undefined,
+            },
+            xml: undefined,
+            reloadKey: 0,
+            collaborationReloadKey: 10000,
+            featureModelCommandManager: new CommandManager(),
+            constraintCommandManager: new CommandManager(),
+            collaborationManager: null,
+            editRights: true,
+            showStartCollaborationSessionDialog: false,
+            showClaimDialog: false,
+            showContinueEditingDialog: false,
+            collaborationStatus: false,
+            openConstraints: false,
+            openInformation: false,
+            showTutorial: false,
+        };
+    },
+
+    created() {
+        this.collaborationManager = new CollaborationManager(
+            this.featureModelCommandManager,
+            this.constraintCommandManager,
+            this
+        );
+        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);
+            this.xml = xml;
+        } else if (this.id === 'new') {
+            const xml = beautify(EXAMPLE_FEATURE_MODEL_XML);
+            xmlTranspiler.xmlToJson(xml, this.data);
+            this.xml = xml;
+        } else if (this.id) {
+            this.initData();
+        } else if (this.collaborationKey) {
+            const uuid = this.collaborationKey.substring(
+                0,
+                this.collaborationKey.length - 1
+            );
+            const checksum = this.collaborationKey.slice(-1);
+            const condition =
+                checksum ===
+                (
+                    Array.from(uuid).reduce(
+                        (last, curr) => parseInt(last, 16) + parseInt(curr, 16)
+                    ) % 16
+                ).toString(16);
+            if (condition) {
+                this.collaborationManager.joinCollaboration(
+                    this.collaborationKey
+                );
+            } else {
+                alert('Wrong key!');
+            }
+        }
+
+        // Start tutorial mode if it has not been completed before
+        this.showTutorial = !localStorage.featureModelTutorialCompleted;
+    },
+
+    beforeRouteLeave(to, from, next) {
+        // If session gets closed by host, don't ask for confirmation
+        if (this.collaborationManager.noConfirm) {
+            const answer = window.confirm(
+                'Do you really want to leave the page? Collaboration sessions will be closed and data will be lost!'
+            );
+
+            if (answer) {
+                // If user wants to close page
+                this.collaborationManager.closeCollaboration();
+                next();
+            } else {
+                // If user doesn't want to close page
+                next(false);
+            }
+        } else {
+            // Don't prevent default site changes without collaboration
+            next();
+        }
+    },
+
+    methods: {
+        save() {
+            localStorage.featureModelData = jsonToXML(this.data);
+            window.onbeforeunload = null;
+
+            appStore.updateSnackbar(
+                'Successfully saved in local storage',
+                'success',
+                5000,
+                true
+            );
+        },
+
+        reset() {
+            // TODO: Transpile the xml file new and restart viewer.
+            this.initData();
+            this.reloadKey++;
+        },
+
+        newEmptyModel() {
+            const command = new NewEmptyModelCommand(
+                this,
+                this.$refs.featureModelTree.d3Data
+            );
+            this.featureModelCommandManager.execute(command);
+            this.updateFeatureModel();
+        },
+
+        initData() {
+            api.get(`${import.meta.env.VITE_APP_DOMAIN}files/${this.id}/`).then(
+                (data) => {
+                    api.get(data.data.local_file).then((rawData) => {
+                        const xml = beautify(rawData.data);
+                        xmlTranspiler.xmlToJson(xml, this.data);
+                        this.xml = xml;
+                    });
+                }
+            );
+        },
+
+        updateFeatureModel() {
+            update.updateSvg(this.$refs.featureModelTree.d3Data);
+        },
+
+        updateConstraints() {
+            this.$refs.constraints.update();
+        },
+
+        exportToXML() {
+            xmlTranspiler.downloadXML(this.data);
+        },
+
+        commandEvent() {
+            // Can't override text for Chrome & Edge
+            window.onbeforeunload = function () {
+                return 'Do you really want to leave the page? Collaboration sessions will be closed and data will be lost!';
+            };
+        },
+
+        createCollaboration() {
+            this.showStartCollaborationSessionDialog = false;
+            this.collaborationManager.createCollaboration();
+            navigator.clipboard.writeText(
+                `${import.meta.env.VITE_APP_DOMAIN}collaboration/${
+                    this.collaborationManager.collaborationKey
+                }`
+            );
+        },
+
+        continueEditing() {
+            this.showContinueEditingDialog = false;
+            this.collaborationManager.closeCollaboration();
+            this.editRights = true;
+        },
+
+        closeFeatureModel() {
+            this.showContinueEditingDialog = false;
+            this.collaborationManager.closeCollaboration();
+            this.collaborationManager.noConfirm = false;
+            router.push('/');
+        },
+    },
+};
+</script>

From ec2704afbe5f5890ad37bf34911ba21edcb70d26 Mon Sep 17 00:00:00 2001
From: lukharsch <lukasharsch@web.de>
Date: Mon, 19 Jun 2023 08:29:03 +0200
Subject: [PATCH 8/8] Added Histories.vue and HistoryDetail.vue and
 fixes/improvements

---
 .../src/components/FeatureModelTable.vue      |  18 +-
 frontendVue3/src/router/index.js              |  32 +-
 frontendVue3/src/views/Histories.vue          | 380 ++++++++++--------
 frontendVue3/src/views/HistoryDetail.vue      | 119 ++++++
 4 files changed, 354 insertions(+), 195 deletions(-)
 create mode 100644 frontendVue3/src/views/HistoryDetail.vue

diff --git a/frontendVue3/src/components/FeatureModelTable.vue b/frontendVue3/src/components/FeatureModelTable.vue
index 5ef9be29..aea620ce 100644
--- a/frontendVue3/src/components/FeatureModelTable.vue
+++ b/frontendVue3/src/components/FeatureModelTable.vue
@@ -151,17 +151,16 @@
                 </template>
                 <template v-slot:item.actions="{ item }">
                     <v-btn
-                        class="mr-2"
-                        color="primary"
+                        class="float-end mr-2"
+                        color="success"
                         variant="tonal"
-                        icon="mdi-eye"
                         size="small"
-                        :to="'/feature-model/' + item.id"
+                        icon="mdi-play"
                     >
                     </v-btn>
                     <v-btn
                         :disabled="item.owner === false"
-                        class="mr-2"
+                        class="float-end mr-2"
                         color="error"
                         variant="tonal"
                         icon="mdi-delete"
@@ -170,11 +169,12 @@
                     >
                     </v-btn>
                     <v-btn
-                        class="mr-2"
-                        color="success"
+                        class="float-end mr-2"
+                        color="primary"
                         variant="tonal"
+                        icon="mdi-eye"
                         size="small"
-                        icon="mdi-play"
+                        :to="'/feature-model/' + item.id"
                     >
                     </v-btn>
                     <!-- <v-btn small rounded color="error" class="mr-2"> <v-icon>mdi-delete</v-icon></v-btn> -->
@@ -277,7 +277,7 @@ const headers = [
     { title: 'Owner', key: 'owner' },
     { title: 'Family (Version)', key: 'family' },
     {
-        title: 'Actions',
+        title: '',
         align: 'center',
         key: 'actions',
         sortable: false,
diff --git a/frontendVue3/src/router/index.js b/frontendVue3/src/router/index.js
index 1a453c1c..9df9c71b 100644
--- a/frontendVue3/src/router/index.js
+++ b/frontendVue3/src/router/index.js
@@ -5,44 +5,37 @@ const routes = [
     {
         path: '/',
         name: 'Home',
-        component: () =>
-            import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+        component: () => import('@/views/Home.vue'),
     },
     {
         path: '/login',
         name: 'Login',
-        component: () =>
-            import(/* webpackChunkName: "home" */ '@/views/Login.vue'),
+        component: () => import('@/views/Login.vue'),
     },
     {
         path: '/profile',
         name: 'Profile',
-        component: () =>
-            import(/* webpackChunkName: "home" */ '@/views/Profile.vue'),
+        component: () => import('@/views/Profile.vue'),
     },
     {
         path: '/models',
         name: 'Models',
-        component: () =>
-            import(/* webpackChunkName: "home" */ '@/views/Models.vue'),
+        component: () => import('@/views/Models.vue'),
     },
     {
         path: '/histories',
         name: 'Histories',
-        component: () =>
-            import(/* webpackChunkName: "home" */ '@/views/Histories.vue'),
+        component: () => import('@/views/Histories.vue'),
     },
     {
         path: '/dsgvo',
         name: 'DSGVO',
-        component: () =>
-            import(/* webpackChunkName: "home" */ '@/views/DSGVO.vue'),
+        component: () => import('@/views/DSGVO.vue'),
     },
     {
         path: '/files/:id/:slug',
         name: 'FileDetail',
-        component: () =>
-            import(/* webpackChunkName: "home" */ '@/views/FileDetail.vue'),
+        component: () => import('@/views/FileDetail.vue'),
         meta: {
             title: 'File Detail',
         },
@@ -51,8 +44,15 @@ const routes = [
         path: '/feature-model/:id',
         name: 'FeatureModel',
         props: true,
-        component: () =>
-            import(/* webpackChunkName: "home" */ '@/views/FeatureModel.vue'),
+        component: () => import('@/views/FeatureModel.vue'),
+    },
+    {
+        path: '/histories/:id/:slug',
+        name: 'HistoryDetail',
+        component: () => import('@/views/HistoryDetail.vue'),
+        meta: {
+            title: 'History Detail',
+        },
     },
 ];
 
diff --git a/frontendVue3/src/views/Histories.vue b/frontendVue3/src/views/Histories.vue
index fef3a362..aeeb891c 100644
--- a/frontendVue3/src/views/Histories.vue
+++ b/frontendVue3/src/views/Histories.vue
@@ -1,241 +1,281 @@
 <template>
     <div class="mainView">
-        <h3 class="text-h3 mb-2 mt-8">My Families</h3>
-        <h5 class="text-h5 mb-4">Here you can add new families</h5>
-        <v-data-table
-            :headers="headers"
-            :items="fileStore.families"
-            :loading="loading"
-            :search="search"
-            class="elevation-1"
-            @click:row="handleClick"
-        >
-            <template v-slot:top>
-                <v-toolbar flat>
-                    <v-toolbar-title class="hidden-sm-and-down"
-                        >Families</v-toolbar-title
-                    >
-                    <v-divider
-                        class="mx-4 hidden-sm-and-down"
-                        inset
-                        vertical
-                    ></v-divider>
-                    <v-spacer class="hidden-sm-and-down"></v-spacer>
-                    <v-text-field
-                        v-model="search"
-                        append-icon="mdi-magnify"
-                        hide-details
-                        label="Search"
-                        single-line
-                    ></v-text-field>
-                    <v-dialog v-model="dialog" max-width="500px">
-                        <template v-slot:activator="{ on, attrs }">
-                            <v-btn
-                                class="mb-2 ml-4"
-                                color="primary"
-                                dark
-                                rounded
-                                v-bind="attrs"
-                                v-on="on"
-                            >
-                                <v-icon left> mdi-plus</v-icon>
-                                New Family
-                            </v-btn>
-                        </template>
-                        <v-card>
-                            <v-card-title>
-                                <span class="text-h5">{{ formTitle }}</span>
-                            </v-card-title>
-
-                            <v-card-text>
-                                <v-container>
-                                    <v-row>
-                                        <v-col cols="12">
-                                            <v-text-field
-                                                v-model="editedItem.label"
-                                                label="Label"
-                                            ></v-text-field>
-                                        </v-col>
-                                        <v-col cols="12">
-                                            <v-text-field
-                                                v-model="editedItem.description"
-                                                label="Description"
-                                            ></v-text-field>
-                                        </v-col>
-                                    </v-row>
-                                </v-container>
-                            </v-card-text>
-
-                            <v-card-actions>
-                                <v-spacer></v-spacer>
+        <h3 class="text-h3 mb-2 mt-8">Histories</h3>
+        <h5 class="text-h5 mb-4">
+            Here you can add new feature model histories
+        </h5>
+        <v-card variant="elevated" rounded class="pa-2">
+            <v-data-table
+                :headers="headers"
+                :items="families"
+                :loading="loading"
+                :search="search"
+            >
+                <template v-slot:top>
+                    <v-toolbar flat style="background-color: transparent">
+                        <v-toolbar-title class="hidden-sm-and-down">
+                            Histories
+                        </v-toolbar-title>
+                        <v-divider
+                            class="mx-4 hidden-sm-and-down"
+                            inset
+                            vertical
+                        ></v-divider>
+                        <v-spacer class="hidden-sm-and-down"></v-spacer>
+                        <v-text-field
+                            v-model="search"
+                            append-inner-icon="mdi-magnify"
+                            hide-details
+                            label="Search"
+                            single-line
+                            variant="filled"
+                            clear-icon="mdi-download"
+                            density="comfortable"
+                        ></v-text-field>
+                        <v-dialog v-model="dialog" max-width="500px">
+                            <template v-slot:activator="{ props }">
                                 <v-btn
-                                    color="blue darken-1"
-                                    text
-                                    @click="close"
+                                    class="ml-4"
+                                    color="primary"
+                                    variant="tonal"
+                                    rounded="pill"
+                                    prepend-icon="mdi-plus"
+                                    v-bind="props"
                                 >
-                                    Cancel
+                                    New Family
                                 </v-btn>
-                                <v-btn
-                                    :loading="addLoading"
-                                    color="blue darken-1"
-                                    text
-                                    @click="save"
-                                >
-                                    Save
-                                </v-btn>
-                            </v-card-actions>
-                        </v-card>
-                    </v-dialog>
-                </v-toolbar>
-            </template>
-            <template v-slot:item.actions="{ item }">
-                <v-btn
-                    :disabled="item.owner === false"
-                    class="mr-2"
-                    color="primary"
-                    rounded
-                    small
-                    @click="editItem(item)"
-                >
-                    <v-icon>mdi-pencil</v-icon>
-                </v-btn>
-                <!-- <v-btn small rounded color="error" class="mr-2"> <v-icon>mdi-delete</v-icon></v-btn> -->
-            </template>
-            <template v-slot:item.id="{ index }">
-                {{ index + 1 }}
-            </template>
-            <template v-slot:item.owner="{ item }">
-                <v-icon v-if="item.owner" color="success"> mdi-check</v-icon>
-                <v-icon v-else color="error"> mdi-cancel</v-icon>
-            </template>
-        </v-data-table>
+                            </template>
+                            <v-card class="pa-2">
+                                <v-card-title>
+                                    <span class="text-h5">{{ formTitle }}</span>
+                                </v-card-title>
+
+                                <v-card-text>
+                                    <v-container>
+                                        <v-row>
+                                            <v-col cols="12">
+                                                <v-text-field
+                                                    variant="outlined"
+                                                    single-line
+                                                    hide-details
+                                                    density="comfortable"
+                                                    v-model="editedItem.label"
+                                                    label="Label"
+                                                ></v-text-field>
+                                            </v-col>
+                                            <v-col cols="12">
+                                                <v-text-field
+                                                    variant="outlined"
+                                                    single-line
+                                                    hide-details
+                                                    density="comfortable"
+                                                    v-model="
+                                                        editedItem.description
+                                                    "
+                                                    label="Description"
+                                                ></v-text-field>
+                                            </v-col>
+                                        </v-row>
+                                    </v-container>
+                                </v-card-text>
+
+                                <v-card-actions>
+                                    <v-spacer></v-spacer>
+                                    <v-btn
+                                        color="blue darken-1"
+                                        text
+                                        @click="close"
+                                    >
+                                        Cancel
+                                    </v-btn>
+                                    <v-btn
+                                        :loading="addLoading"
+                                        color="blue darken-1"
+                                        text
+                                        @click="save"
+                                    >
+                                        Save
+                                    </v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </v-dialog>
+                    </v-toolbar>
+                </template>
+                <template v-slot:item.label="{ item }">
+                    <v-btn
+                        variant="text"
+                        color="primary"
+                        append-icon="mdi-arrow-top-right-thin"
+                        @click="handleClick(item.raw)"
+                    >
+                        {{ item.raw.label }}
+                    </v-btn>
+                </template>
+                <template v-slot:item.actions="{ item }">
+                    <v-btn
+                        :disabled="item.owner === false"
+                        class="float-end mr-2"
+                        color="primary"
+                        size="small"
+                        variant="tonal"
+                        icon="mdi-pencil"
+                        rounded
+                        small
+                        @click="editItem(item)"
+                    >
+                    </v-btn>
+                    <!-- <v-btn small rounded color="error" class="mr-2"> <v-icon>mdi-delete</v-icon></v-btn> -->
+                </template>
+                <template v-slot:item.id="{ index }">
+                    {{ index + 1 }}
+                </template>
+                <template v-slot:item.owner="{ item }">
+                    <v-icon v-if="item.raw.owner" color="success">
+                        mdi-check
+                    </v-icon>
+                    <v-icon v-else color="error"> mdi-cancel</v-icon>
+                </template>
+            </v-data-table>
+        </v-card>
     </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import api from '@/services/api.service';
 import { useFileStore } from '@/store/file';
+import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
+import { useAppStore } from '@/store/app';
 
+const appStore = useAppStore();
 const fileStore = useFileStore();
-const API_URL = process.env.VUE_APP_DOMAIN;
+const router = useRouter();
+const API_URL = import.meta.env.VUE_APP_DOMAIN;
+const { families } = storeToRefs(useFileStore());
 
 const search = '';
-const dialog = false;
-const editedIndex = -1;
+const dialog = ref(false);
+const editedIndex = ref(-1);
 const headers = [
-    {
-        text: 'ID',
+    /*{
+        title: 'ID',
         align: 'start',
         sortable: false,
-        value: 'id',
-    },
-    { text: 'Label', value: 'label' },
-    { text: 'Description', value: 'description' },
-    { text: 'Owner', value: 'owner' },
+        key: 'id',
+    },*/
+    { title: 'Label', key: 'label' },
+    { title: 'Description', key: 'description' },
+    { title: 'Owner', key: 'owner' },
     {
-        text: 'Actions',
+        title: '',
         align: 'center',
-        value: 'actions',
+        key: 'actions',
         sortable: false,
     },
 ];
-const editedItem = {
+let editedItem = reactive({
     label: '',
     description: '',
     owner: false,
-};
+});
 const defaultItem = {
     label: '',
     description: '',
     owner: false,
 };
-const families = [];
 const loading = ref(false);
 const addLoading = ref(false);
 
 const formTitle = computed(() => {
-    return this.editedIndex === -1 ? 'Create New Family' : 'Edit Family';
+    return editedIndex.value === -1 ? 'Create New History' : 'Edit Family';
 });
 
 function editItem(item) {
-    this.editedIndex = item.id;
-    this.editedItem = Object.assign({}, item);
-    this.dialog = true;
+    editedIndex.value = item.id;
+    editedItem = Object.assign({}, item.raw);
+    editedItem.label = item.raw.label;
+    console.log(editedItem.label);
+    dialog.value = true;
 }
+
+watch(dialog, (value) => {
+    if (!value) {
+        editedIndex.value = -1;
+        editedItem = defaultItem;
+    }
+});
 function close() {
-    this.dialog = false;
-    this.$nextTick(() => {
-        this.editedIndex = -1;
-    });
+    dialog.value = false;
+    editedIndex.value = -1;
 }
 
 function addFamily() {
-    this.addLoading = true;
+    addLoading.value = true;
     api.post(`${API_URL}families/`, this.editedItem)
         .then(() => {
-            this.$store.commit('updateSnackbar', {
-                message: 'Family added successfully!',
-                variant: 'success',
-                timeout: 5000,
-                show: true,
-            });
-            this.$store.dispatch('fetchFamilies');
-            this.addLoading = false;
+            appStore.updateSnackbar(
+                'Family added successfully!',
+                'success',
+                5000,
+                true
+            );
+            fileStore.fetchFamilies();
+            addLoading.value = false;
         })
         .catch((error) => {
-            this.$store.commit('updateSnackbar', {
-                message: 'Error: ' + error.message,
-                variant: 'error',
-                timeout: 5000,
-                show: true,
-            });
-            this.addLoading = false;
+            appStore.updateSnackbar(
+                'Error: ' + error.message,
+                'error',
+                5000,
+                true
+            );
+            addLoading.value = false;
         });
 }
 
 function updateFamily() {
-    this.addLoading = true;
+    addLoading.value = true;
     api.put(`${API_URL}families/${this.editedIndex}/`, this.editedItem)
         .then(() => {
-            this.$store.commit('updateSnackbar', {
-                message: 'Family updated successfully!',
-                variant: 'success',
-                timeout: 5000,
-                show: true,
-            });
-            this.$store.dispatch('fetchFamilies');
-            this.addLoading = false;
+            appStore.updateSnackbar(
+                'Family updated successfully!',
+                'success',
+                5000,
+                true
+            );
+            fileStore.fetchFamilies();
+            addLoading.value = false;
         })
         .catch((error) => {
-            this.$store.commit('updateSnackbar', {
-                message: 'Error: ' + error.message,
-                variant: 'error',
-                timeout: 5000,
-                show: true,
-            });
-            this.addLoading = false;
+            appStore.updateSnackbar(
+                'Error: ' + error.message,
+                'error',
+                5000,
+                true
+            );
+            addLoading.value = false;
         });
 }
 
 function save() {
-    if (this.editedIndex > -1) {
-        this.updateFamily();
+    if (editedIndex.value > -1) {
+        updateFamily();
     } else {
-        this.addFamily();
+        addFamily();
     }
-    this.close();
+    close();
 }
 function handleClick(value) {
-    this.$router.push({
-        name: 'FamilyDetail',
+    router.push({
+        name: 'HistoryDetail',
         params: { id: value.id, slug: value.slug },
     });
 }
 onMounted(() => {
     loading.value = true;
-    fileStore.fetchConfirmedFeatureModels();
-    families.value = fileStore.families;
+    fileStore.fetchFamilies();
+    //families.value = fileStore.families;
     loading.value = false;
 });
 </script>
diff --git a/frontendVue3/src/views/HistoryDetail.vue b/frontendVue3/src/views/HistoryDetail.vue
new file mode 100644
index 00000000..d8419da9
--- /dev/null
+++ b/frontendVue3/src/views/HistoryDetail.vue
@@ -0,0 +1,119 @@
+<template>
+    <div class="mainView">
+        <h3 class="text-h3 mb-2 mt-8">
+            Family:
+            <span v-if="loadingTable">
+                <v-progress-circular
+                    color="primary"
+                    indeterminate
+                ></v-progress-circular>
+            </span>
+            <span v-else>{{ family.label }}</span>
+        </h3>
+        <h5 class="text-h5 mb-4">Details and more information</h5>
+        TODO: see FamilyDetail.vue in old Vue-frontend-folder
+    </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import api from '@/services/api.service';
+
+const route = useRoute();
+const API_URL = import.meta.env.VUE_APP_DOMAIN;
+
+const family = reactive({});
+const files = ref([]);
+const loadingTable = ref(true);
+const numberOfFeaturesData = reactive({
+    labels: [],
+    datasets: [],
+});
+const numberOfConstraintsData = reactive({
+    labels: [],
+    datasets: [],
+});
+const numberOfConfigurationsData = reactive({
+    labels: [],
+    datasets: [],
+});
+
+async function getFamily() {
+    const id = route.params.id;
+    await api
+        .get(`${API_URL}families/${id}/`)
+        .then((response) => {
+            family.value = response.data;
+        })
+        .catch((error) => {
+            console.log(error);
+        });
+}
+async function fetchFeatureModelOfFamily() {
+    await api
+        .get(`${API_URL}files/uploaded/confirmed/?family=${family.id}`)
+        .then(async (response) => {
+            const sorted = response.data.sort((a, b) =>
+                parseInt(a.version, 10) > parseInt(b.version, 10)
+                    ? 1
+                    : parseInt(b.version, 10) > parseInt(a.version, 10)
+                    ? -1
+                    : 0
+            );
+            files.value = sorted.map((elem) => ({
+                ...elem,
+                active: false,
+            }));
+            const labels = sorted.map((elem) => elem.version);
+            numberOfFeaturesData.value.labels = labels;
+            numberOfConstraintsData.value.labels = labels;
+            numberOfConfigurationsData.value.labels = labels;
+            let data = [];
+            let dataConstraints = [];
+            let dataConfigurations = [];
+            for (let i = 0; i < sorted.length; i++) {
+                const elem = sorted[i];
+                const res = await getNumbersFromFile(
+                    elem.local_file,
+                    sorted[i].label
+                );
+                data.push(res.amountFeatures);
+                dataConstraints.push(res.amountConstraints);
+                dataConfigurations.push(res.amountConfigurations);
+            }
+            numberOfFeaturesData.value.datasets = [
+                {
+                    label: 'Number of Features',
+                    borderColor: 'green',
+                    fill: false,
+                    data,
+                },
+            ];
+
+            numberOfConstraintsData.value.datasets = [
+                {
+                    label: 'Number of Constraints',
+                    borderColor: 'blue',
+                    fill: false,
+                    data: dataConstraints,
+                },
+            ];
+
+            this.numberOfConfigurationsData.value.datasets = [
+                {
+                    label: 'Number of Configurations (log 10)',
+                    borderColor: 'red',
+                    fill: false,
+                    data: dataConfigurations,
+                },
+            ];
+            loadingTable.value = false;
+        });
+}
+
+onMounted(async () => {
+    await getFamily();
+    await fetchFeatureModelOfFamily();
+});
+</script>