Different minor improvements (#557)

* do not move view when selecting different attribute of same object

* make possible to disable editMode and use schema diagram as viewer only

* change initial schemaselection dialog from radiobutton to normal button

* apply formatting changes

* fix conflict

* add example

* add title of item type to 'add item' button

* refactor usage of useSettings()

* work on biochemistry example

* fix panels getting messed up because of overwriting shorter arrays with default items

* minor improvements

* added option to unselect current element in schema diagram

* apply formatting changes

---------

Co-authored-by: Logende <Logende@users.noreply.github.com>

Author: Logende

examples/biochemistry/README.md

@@ -104,7 +104,7 @@ Notice, that in the GUI preview, the `metal_salt_mass_unit` and `linker_mass_uni
 
 ![Result of attribute type change to enum](figs/change_attribute_type_to_enum_result.png)
 
-In the same manner, create a new enum `time_unit` with the values `second`, `minute`, `hour`, `day` and `week`.
+In the same manner, create a new enum `time_unit` with the values `s`, `min`, `h`, `day` and `week`.
 To the `time_unit` attribute, change the type to the new enumeration.
 
 Also do the same for the `temperature_unit` attribute, with the values `K`, `deg C` and `deg F`.

meta_configurator/src/components/dialogs/snapshot/SaveSnapshotDialog.vue

@@ -1,6 +1,6 @@
 <!-- Dialog to import CSV data -->
 <script setup lang="ts">
-import {computed, type Ref, ref} from 'vue';
+import {type Ref, ref} from 'vue';
 import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
 import Message from 'primevue/message';

meta_configurator/src/components/panels/schema-diagram/SchemaEnumNode.vue

@@ -87,7 +87,8 @@ function addEnumItem() {
 <template>
   <div
     :class="{'bg-yellow-100': isHighlighted(), 'vue-flow__node-schemaenum': !isHighlighted}"
-    @click="clickedNode()">
+    @click="clickedNode()"
+    @click.stop>
     <Handle type="target" :position="props.targetPosition!" class="vue-flow__handle"></Handle>
     <p>&lt;enumeration&gt;</p>
 

meta_configurator/src/components/panels/schema-diagram/SchemaObjectNode.vue

@@ -135,6 +135,7 @@ function isAttributeHighlighted() {
   <div
     :class="{'bg-yellow-100': isHighlighted(), 'vue-flow__node-schemaobject': !isHighlighted}"
     @click="clickedNode()"
+    @click.stop
     @dblclick="doubleClickedNode()">
     <Handle type="target" :position="props.targetPosition!" class="vue-flow__handle"></Handle>
 

meta_configurator/src/components/panels/schema-diagram/VueFlowPanel.vue

@@ -376,6 +376,11 @@ function addEnum() {
   });
   selectElement(enumPath);
 }
+
+function unselectElement() {
+  selectedNode.value = undefined;
+  selectedData.value = undefined;
+}
 </script>
 
 <template>
@@ -384,16 +389,18 @@ function addEnum() {
       :nodes="activeNodes"
       :edges="activeEdges"
       @nodes-initialized="layoutGraph(graphDirection, true)"
+      @click="unselectElement()"
       fit-view-on-init
       :max-zoom="4"
       :min-zoom="0.1">
       <div class="controls">
-        <DiagramOptionsPanel @rebuild_graph="updateGraph(true)" @fit_view="fitView()" />
+        <DiagramOptionsPanel @rebuild_graph="updateGraph(true)" @fit_view="fitView()" @click.stop />
 
         <CurrentPathBreadcrump
           :session-mode="SessionMode.SchemaEditor"
           :path="schemaSession.currentPath.value"
           root-name="document root"
+          @click.stop
           @update:path="updateCurrentPath"></CurrentPathBreadcrump>
 
         <Button label="Add Object" @click="addObject" class="main-options-element" />

meta_configurator/src/utility/settingsUpdater.ts

@@ -10,7 +10,7 @@ function addDefaultsForMissingFields(userFile: any, defaultsFile: any) {
       userFile[key] = defaultsFile[key];
 
       // element itself was existing, but maybe it has some missing fields
-    } else if (typeof defaultsFile[key] === 'object') {
+    } else if (typeof defaultsFile[key] === 'object' && !Array.isArray(defaultsFile[key])) {
       addDefaultsForMissingFields(userFile[key], defaultsFile[key]);
     }
   }