initial work on parent component

src/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import TheModeler from './components/TheModeler.vue'
 import TheDetail from './components/TheDetail.vue'
+import TheParent from './components/TheParent.vue'
+
 import TheModels from './components/TheModels.vue'
 import { useStore } from './util/store';
 import { AddressSpace } from './ua/AddressSpace';
@@ -36,6 +38,7 @@ async function load(): Promise<AddressSpace> {
         <TheModeler />
       </div>
       <div class="col col-6">
+        <TheParent />
         <TheDetail />
       </div>
     </div>

src/components/TheParent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useStore } from '@/util/store'
+import { computed } from 'vue';
+const store = useStore()
+
+
+const node = computed(() => {
+    return store.selectedNode;
+
+});
+
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-body" v-if="store.selectedNode != null" :elem="store.selectedNode">
+      <h5 class="card-title">Parent</h5>
+      <div class="card-text">
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" id="inputGroup-sizing-default">Name</span>
+          </div>
+          <input readonly type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"
+            :value="node?.getParent()?.displayName">
+        </div>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" id="inputGroup-sizing-default">Reference</span>
+          </div>
+          <select class="form-select" aria-label="Default select example">
+            <option selected v-text="node?.getParentRef()?.referenceType" ></option>
+            <option value="1">...</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped></style>

src/ua/UABaseNode.ts

@@ -48,6 +48,33 @@ export class UABaseNode implements IToXML{
         }
     }
 
+    getParent(): UABaseNode|null {
+        const ref=this.getParentRef();
+        if(ref?.fromNode===this)
+            return ref.toNode;
+        if(ref?.toNode===this)
+            return ref.fromNode;
+        return null;
+    }
+
+    getParentRef(): UAReference|null{
+        for(const ref of this.references) {
+            switch(ref.referenceType) {
+                case 'HasComponent':
+                case 'HasOrderedComponent':
+                case 'Organizes':
+                case 'HasProperty':
+                case 'HasSubtype':
+                case 'HasAddIn':
+                    if(ref.fromNode===this&&ref.isForward===false)
+                        return ref;
+                    if(ref.toNode===this&&ref.isForward===true)
+                        return ref;
+            }
+        }
+        return null;
+    }
+
     getChildren(): UABaseNode[] {
         const children: UABaseNode[]=[];
         for(const ref of this.references) {