From 7b6b5c9927c34ebc519850f39aeed120773613ff Mon Sep 17 00:00:00 2001
From: david <godicked@gmail.com>
Date: Thu, 4 Jul 2024 23:25:09 +0200
Subject: [PATCH] fix errors

---
 .../components/inputs/PropertyInputTable.vue  |  3 +--
 panoptic_front/src/components/menu/Menu.vue   |  4 ++--
 .../modals/image/ImagePropertyCol.vue         |  4 ++--
 .../components/scrollers/tree/PropInput.vue   |  2 +-
 panoptic_front/src/core/GroupManager.ts       |  2 +-
 panoptic_front/src/core/TabManager.ts         |  8 +++++++
 panoptic_front/src/data/dataStore.ts          |  6 +++++
 panoptic_front/src/data/projectStore.ts       |  5 ++--
 panoptic_front/src/views/TabContainer.vue     | 23 -------------------
 9 files changed, 24 insertions(+), 33 deletions(-)
 delete mode 100644 panoptic_front/src/views/TabContainer.vue

diff --git a/panoptic_front/src/components/inputs/PropertyInputTable.vue b/panoptic_front/src/components/inputs/PropertyInputTable.vue
index ae171089..6920a736 100644
--- a/panoptic_front/src/components/inputs/PropertyInputTable.vue
+++ b/panoptic_front/src/components/inputs/PropertyInputTable.vue
@@ -7,7 +7,6 @@ import PropInput from './PropInput.vue';
 import TagBadge from '../tagtree/TagBadge.vue';
 import { useDataStore } from '@/data/dataStore';
 
-const project = useProjectStore()
 const data = useDataStore()
 
 const props = defineProps<{
@@ -51,7 +50,7 @@ function toggleProperty(property: Property) {
                         <p v-if="property.type != PropertyType._folders" class="m-0 p-0">{{
                     image.properties[property.id] }}</p>
                         <span v-else>
-                            <TagBadge :tag="project.data.folders[image.properties[property.id]].name" :color="-1" />
+                            <TagBadge :tag="data.folders[image.properties[property.id]].name" :color="-1" />
                         </span>
                     </td>
 
diff --git a/panoptic_front/src/components/menu/Menu.vue b/panoptic_front/src/components/menu/Menu.vue
index 76496231..59bfa89c 100644
--- a/panoptic_front/src/components/menu/Menu.vue
+++ b/panoptic_front/src/components/menu/Menu.vue
@@ -9,7 +9,7 @@ import { useProjectStore } from '@/data/projectStore';
 import { usePanopticStore } from '@/data/panopticStore';
 import { goNext } from '@/utils/utils';
 import TaskStatus from './TaskStatus.vue';
-import { useDataStore } from '@/data/dataStore';
+import { deletedID, useDataStore } from '@/data/dataStore';
 
 const project = useProjectStore()
 const data = useDataStore()
@@ -164,7 +164,7 @@ watch(() => project.status.import.to_import, () => showImport.value = true)
                     }}</b></wTT>
                     <div class="mt-2" v-if="project.status.loaded">
                         <template v-for="property in data.properties">
-                            <div class="property-item" v-if="property.id < 0">
+                            <div class="property-item" v-if="property.id < 0 && property.id != deletedID">
                                 <wTT pos="bottom"
                                     :message="'main.nav.computed.' + Math.abs(property.id).toString() + '_tooltip'">
                                     <PropertyOptions :property="property" />
diff --git a/panoptic_front/src/components/modals/image/ImagePropertyCol.vue b/panoptic_front/src/components/modals/image/ImagePropertyCol.vue
index 756b3e58..1608b58a 100644
--- a/panoptic_front/src/components/modals/image/ImagePropertyCol.vue
+++ b/panoptic_front/src/components/modals/image/ImagePropertyCol.vue
@@ -3,7 +3,7 @@ import Zoomable from '@/components/Zoomable.vue';
 import CenteredImage from '@/components/images/CenteredImage.vue';
 import PropertyInputTable from '@/components/inputs/PropertyInputTable.vue';
 import { GroupManager, ImageIterator } from '@/core/GroupManager';
-import { useDataStore } from '@/data/dataStore';
+import { deletedID, useDataStore } from '@/data/dataStore';
 import { PropertyMode } from '@/data/models';
 import { Ref, computed, inject, ref } from 'vue';
 
@@ -41,7 +41,7 @@ const properties = computed(() => {
     if (mode.value == 2) {
         res.push(...data.propertyList.filter(p => p.computed))
     }
-    return res
+    return res.filter(p => p.id != deletedID)
 })
 
 function setMode(value) {
diff --git a/panoptic_front/src/components/scrollers/tree/PropInput.vue b/panoptic_front/src/components/scrollers/tree/PropInput.vue
index fe08759d..ca3cec1f 100644
--- a/panoptic_front/src/components/scrollers/tree/PropInput.vue
+++ b/panoptic_front/src/components/scrollers/tree/PropInput.vue
@@ -68,7 +68,7 @@ const width = computed(() => props.size ?? 100)
     <div v-else class="d-felx flex-row overflow-hidden text-nowrap" style="line-height: 26px;" >
         <PropertyIcon :type="property.type" style="margin-right: 3px;"/>
         <span v-if="property.type == PropertyType._folders">
-            <TagBadge :tag="project.data.folders[data.instances[props.image.id].properties[props.property.id]].name" :color="-1" />
+            <TagBadge :tag="data.folders[data.instances[props.image.id].properties[props.property.id]].name" :color="-1" />
         </span>
         <span v-else>{{ data.instances[props.image.id].properties[props.property.id] }}</span>
     </div>
diff --git a/panoptic_front/src/core/GroupManager.ts b/panoptic_front/src/core/GroupManager.ts
index 92625770..a756850e 100644
--- a/panoptic_front/src/core/GroupManager.ts
+++ b/panoptic_front/src/core/GroupManager.ts
@@ -632,7 +632,7 @@ export class GroupManager {
 
     verifyState(properties: PropertyIndex) {
         this.state.groupBy = this.state.groupBy.filter(id => properties[id] && properties[id].id != deletedID)
-        Object.keys(this.state.options).filter(id => !properties[id] || properties[id].id != deletedID).forEach(id => delete this.state.options[id])
+        Object.keys(this.state.options).filter(id => !properties[id] || properties[id].id == deletedID).forEach(id => delete this.state.options[id])
     }
 
     registerIterator(it: GroupIterator) {
diff --git a/panoptic_front/src/core/TabManager.ts b/panoptic_front/src/core/TabManager.ts
index a7c77527..8f5b5bf3 100644
--- a/panoptic_front/src/core/TabManager.ts
+++ b/panoptic_front/src/core/TabManager.ts
@@ -4,6 +4,7 @@ import { useProjectStore } from "@/data/projectStore"
 import { reactive, toRefs } from "vue"
 import { EventEmitter } from "@/utils/utils"
 import { useDataStore } from "@/data/dataStore"
+import { defaultPropertyOption } from "@/data/builder"
 
 export class TabManager {
     isLoaded: boolean
@@ -34,7 +35,14 @@ export class TabManager {
     }
 
     verifyState() {
+        const data = useDataStore()
         this.collection.verifyState()
+        if (this.state.propertyOptions == undefined) {
+            this.state.propertyOptions = {}
+        }
+        for (let propId in data.properties) {
+            this.state.propertyOptions[propId] = Object.assign(defaultPropertyOption(), this.state.propertyOptions[propId])
+        }
     }
     
     saveState() {
diff --git a/panoptic_front/src/data/dataStore.ts b/panoptic_front/src/data/dataStore.ts
index c0ab15f5..7be42f8a 100644
--- a/panoptic_front/src/data/dataStore.ts
+++ b/panoptic_front/src/data/dataStore.ts
@@ -92,12 +92,18 @@ export const useDataStore = defineStore('dataStore', () => {
     }
 
     function importProperties(toImport: Property[]) {
+        const someNew = toImport.some(p => properties.value[p.id] == undefined)
         for (let property of toImport) {
             if (property.id in properties.value) {
                 property.tags = properties.value[property.id].tags
             }
             properties.value[property.id] = property
         }
+        if(someNew) {
+            const project = useProjectStore()
+            const tab = project.getTabManager()
+            tab.verifyState()
+        }
     }
 
     function importTags(toImport: Tag[]) {
diff --git a/panoptic_front/src/data/projectStore.ts b/panoptic_front/src/data/projectStore.ts
index 0787c81c..bf458e2f 100644
--- a/panoptic_front/src/data/projectStore.ts
+++ b/panoptic_front/src/data/projectStore.ts
@@ -60,7 +60,7 @@ export const useProjectStore = defineStore('projectStore', () => {
 
         console.log('init')
         if (!tabManager) {
-            tabManager = new TabManager((data.tabs[data.selectedTabId]))
+            tabManager = new TabManager()
         }
         // Execute all async functions here before setting any data into the store
         // This avoids other UI elements to react to changes before the init function is finished
@@ -103,6 +103,7 @@ export const useProjectStore = defineStore('projectStore', () => {
         await loadTabs(tabs)
         verifyData()
 
+
         status.loaded = true
     }
 
@@ -321,7 +322,7 @@ export const useProjectStore = defineStore('projectStore', () => {
         actions,
         // setActionFunctions, hasGroupFunction, hasSimilaryFunction,
         setDefaultVectors,
-        backendStatus, reload,
+        backendStatus, reload, updatePropertyOptions,
         showTutorial
     }
 
diff --git a/panoptic_front/src/views/TabContainer.vue b/panoptic_front/src/views/TabContainer.vue
deleted file mode 100644
index 7ee5cee4..00000000
--- a/panoptic_front/src/views/TabContainer.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { TabManager } from '@/core/TabManager';
-import { useProjectStore } from '@/data/projectStore';
-import { defineProps, provide, watch } from 'vue'
-
-const project = useProjectStore()
-
-const props = defineProps<{
-    tabId: number
-}>()
-
-const tabManager = new TabManager(project.data.tabs[props.tabId])
-provide('tabManager', tabManager)
-
-watch(() => props.tabId, () => tabManager.load(project.data.tabs[props.tabId]))
-watch(tabManager.state, (state) => {
-    project.updateTabs()
-}, { deep: true })
-</script>
-
-<template>
-    <slot></slot>
-</template>
\ No newline at end of file