different minor improvements (#548)

* improve schema diagram

* hide mergeAllOfs option and add disclaimer

* stop propagating clicks that should not be

* rename tooltip

* update backend rate limit

* fix schema diagram layouting

* apply formatting changes

---------

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

Author: Logende

backend/app.py

@@ -140,7 +140,7 @@ def add_snapshot():
 
 
 @app.route('/snapshot/<snapshot_id>', methods=['GET'])
-@limiter.limit("30 per minute")
+@limiter.limit("20 per minute")
 def get_snapshot(snapshot_id):
     try:
         snapshots_collection = db['snapshots']

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

@@ -52,15 +52,6 @@ function rebuildGraph() {
             class="options-input-switch" />
         </label>
       </div>
-      <div>
-        <label
-          >Merge allOfs
-          <InputSwitch
-            v-model="useSettings().schemaDiagram.mergeAllOfs"
-            class="options-input-switch" />
-        </label>
-      </div>
-
       <div class="container">
         <div>
           <Button label="Rebuild Graph" @click="rebuildGraph" class="options-element" />

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

@@ -102,15 +102,20 @@ function addEnumItem() {
         v-tooltip.bottom="'Extract inlined Object to definitions (will enable renaming and more)'"
         @mousedown.stop
         @click.stop
+        @dblclick.stop
         @click="_ => extractInlinedObject()">
         <FontAwesomeIcon :icon="'fa-wrench fa-solid'" />
       </Button>
 
       <hr />
 
-      <p v-if="useSettings().schemaDiagram.showEnumValues" v-for="value in props.data!.values">
-        {{ value }}
-      </p>
+      <div
+        v-if="useSettings().schemaDiagram.showEnumValues"
+        v-for="(value,index) in props.data!.values">
+        <p v-if="index < useSettings().schemaDiagram.maxEnumValuesToShow">
+          {{ value }}
+        </p>
+      </div>
     </div>
 
     <div v-else>
@@ -120,6 +125,8 @@ function addEnumItem() {
         v-model="enumName"
         @blur="updateEnumName"
         @mousedown.stop
+        @click.stop
+        @dblclick.stop
         @keydown.stop
         @keyup.enter="updateEnumName" />
       <Button
@@ -128,6 +135,7 @@ function addEnumItem() {
         v-tooltip.bottom="'Delete Enum'"
         @mousedown.stop
         @click.stop
+        @dblclick.stop
         @click="_ => deleteEnum()">
         <FontAwesomeIcon :icon="'fa-trash fa-solid'" />
       </Button>
@@ -141,6 +149,8 @@ function addEnumItem() {
           v-model="enumValues[index]"
           @blur="updateEnumValues"
           @mousedown.stop
+          @click.stop
+          @dblclick.stop
           @keydown.stop
           @keyup.enter="updateEnumValues">
         </InputText>
@@ -151,6 +161,7 @@ function addEnumItem() {
           v-tooltip.bottom="'Delete Item'"
           @mousedown.stop
           @click.stop
+          @dblclick.stop
           @click="_ => deleteEnumItem(index)">
           <FontAwesomeIcon :icon="'fa-trash fa-solid'" />
         </Button>
@@ -162,6 +173,7 @@ function addEnumItem() {
         v-tooltip.bottom="'Add Item'"
         @mousedown.stop
         @click.stop
+        @dblclick.stop
         @click="_ => addEnumItem()">
         <FontAwesomeIcon :icon="'fa-plus fa-solid'" />
       </Button>

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

@@ -98,6 +98,8 @@ function getHandleTop() {
         v-model="attrName"
         @blur="updateAttributeName"
         @mousedown.stop
+        @click.stop
+        @dblclick.stop
         @keydown.stop
         @keyup.enter="updateAttributeName" />
       <span class="text-red-600">{{ props.data.required ? '*' : '' }}</span>
@@ -109,6 +111,8 @@ function getHandleTop() {
         optionLabel="label"
         @mousedown.stop
         @keydown.stop
+        @click.stop
+        @dblclick.stop
         placeholder="Select Type" />
 
       <Button
@@ -117,6 +121,7 @@ function getHandleTop() {
         v-tooltip.bottom="'Delete Property'"
         @mousedown.stop
         @click.stop
+        @dblclick.stop
         @click="_ => deleteAttribute()">
         <FontAwesomeIcon :icon="'fa-trash fa-solid'" />
       </Button>

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

@@ -143,9 +143,12 @@ function isAttributeHighlighted() {
         v-if="!isDefinedInDefinitions() && (isHighlighted() || isAttributeHighlighted())"
         class="vue-flow-object-button"
         size="small"
-        v-tooltip.bottom="'Extract inlined Object to definitions (will enable renaming and more)'"
+        v-tooltip.bottom="
+          'Extract inlined object schema to definitions (will enable renaming and more)'
+        "
         @mousedown.stop
         @click.stop
+        @dblclick.stop
         @click="_ => extractInlinedObject()">
         <FontAwesomeIcon :icon="'fa-wrench fa-solid'" />
       </Button>
@@ -158,6 +161,8 @@ function isAttributeHighlighted() {
         v-model="objectName"
         @blur="updateObjectName"
         @mousedown.stop
+        @click.stop
+        @dblclick.stop
         @keydown.stop
         @keyup.enter="updateObjectName" />
       <Button
@@ -166,6 +171,7 @@ function isAttributeHighlighted() {
         v-tooltip.bottom="'Delete Object'"
         @mousedown.stop
         @click.stop
+        @dblclick.stop
         @click="_ => deleteObject()">
         <FontAwesomeIcon :icon="'fa-trash fa-solid'" />
       </Button>
@@ -190,6 +196,7 @@ function isAttributeHighlighted() {
         v-tooltip.bottom="'Add Property'"
         @click="_ => addAttribute()"
         @click.stop
+        @dblclick.stop
         @mousedown.stop
         class="vue-flow-object-button">
         <FontAwesomeIcon :icon="'fa-plus fa-solid'" />
@@ -201,7 +208,7 @@ function isAttributeHighlighted() {
       type="source"
       :position="props.sourcePosition!"
       class="vue-flow__handle"
-      style="bottom: 10px"></Handle>
+      :style="[props.sourcePosition == Position.Right ? {top: '14px'} : {}]"></Handle>
   </div>
 </template>
 

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

@@ -158,7 +158,7 @@ function updateGraph(forceRebuild: boolean = false) {
     updateToSubgraph(currentPath);
   }
 
-  if (graphNeedsLayouting && forceRebuild) {
+  if (graphNeedsLayouting || forceRebuild) {
     layoutGraph(graphDirection.value, false);
   }
 

meta_configurator/src/components/panels/schema-diagram/schemaDiagramTypes.ts

@@ -31,6 +31,7 @@ export class SchemaGraph {
       let type = 'default';
       let color = 'black';
       const markerEnd = MarkerType.Arrow;
+      const sourceHandle = individualAttributeHandles ? data.startHandle : null;
 
       switch (data.edgeType) {
         case EdgeType.ATTRIBUTE:
@@ -62,7 +63,7 @@ export class SchemaGraph {
         id: pathsToEdgeId(data.start.absolutePath, data.end.absolutePath, data.label, data.isArray),
         source: pathToNodeId(data.start.absolutePath),
         target: pathToNodeId(data.end.absolutePath),
-        sourceHandle: individualAttributeHandles ? data.startHandle : 'main',
+        sourceHandle: sourceHandle ? sourceHandle : 'main',
         type: type,
         label: data.label,
         data: data,

meta_configurator/src/components/panels/schema-diagram/typeUtils.ts

@@ -6,7 +6,7 @@ import type {Path} from '@/utility/path';
 export type AttributeTypeChoice = {label: string; schema: JsonSchemaObjectType};
 
 export function collectTypeChoices(nodesData: SchemaNodeData[]): AttributeTypeChoice[] {
-  const simpleTypes: SchemaPropertyTypes = ['string', 'number', 'boolean', 'null'];
+  const simpleTypes: SchemaPropertyTypes = ['string', 'number', 'integer', 'boolean', 'null'];
 
   const result: AttributeTypeChoice[] = [];
 

meta_configurator/src/settings/settingsSchema.ts

@@ -175,7 +175,9 @@ export const SETTINGS_SCHEMA: TopLevelSchema = {
           type: 'boolean',
           description:
             'If set to true, allOf schemas will be merged in the schema diagram. This can make the diagram more readable, but sometimes also is not desired, because some information gets lost.',
-          default: true,
+          $comment:
+            'Warning: has undefined behavior when merging multiple allOfs using the "$ref" keyword.',
+          default: false,
         },
       },
     },