enable extraction of inline elements in schema editor and redis password (#541)

* enable extraction of inlined elements in schema diagram

* add password to redis and make mongodb password depend on environment variable

* apply formatting changes

---------

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

Author: Logende

backend/app.py

@@ -32,7 +32,14 @@
 db = client[MONGO_DB]
 
 # Set up Redis connection
-REDIS_URL = os.getenv('REDIS_URL', 'redis://localhost:6379/0')
+REDIS_HOST = os.getenv('REDIS_HOST', 'localhost')
+REDIS_PORT = os.getenv('REDIS_PORT', 6379)
+REDIS_PASS = os.getenv('REDIS_PASS', None)
+
+# Construct the Redis URL including the password
+REDIS_URL = f"redis://:{REDIS_PASS}@{REDIS_HOST}:{REDIS_PORT}/0"
+
+# Initialize Redis client
 redis_client = redis.Redis.from_url(REDIS_URL)
 
 # Set up Flask-Limiter with Redis

docker-compose.yml

@@ -24,12 +24,13 @@ services:
       - app-network
     environment:
       FLASK_ENV: development
-      MONGO_INITDB_ROOT_USERNAME: root
-      MONGO_INITDB_ROOT_PASSWORD: example
+      MONGO_USER: root
+      MONGO_PASS: ${MONGO_PASSWORD}
       MONGO_HOST: mongo
       MONGO_PORT: 27017
       MONGO_DB: metaconfigurator
       REDIS_URL: redis://redis:6379/0
+      REDIS_PASS: ${REDIS_PASSWORD}
 
   mongo:
     image: mongo:latest
@@ -39,7 +40,7 @@ services:
     restart: unless-stopped
     environment:
       MONGO_INITDB_ROOT_USERNAME: root
-      MONGO_INITDB_ROOT_PASSWORD: example
+      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_PASSWORD}
       MONGO_INITDB_DATABASE: metaconfigurator
     volumes:
       - mongo-data:/data/db
@@ -51,6 +52,8 @@ services:
     ports:
       - "6379:6379"
     restart: unless-stopped
+    environment:
+      REDIS_PASSWORD: ${REDIS_PASSWORD}
     networks:
       - app-network
 

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

@@ -2,6 +2,7 @@
 import {
   SchemaElementData,
   SchemaEnumNodeData,
+  SchemaObjectNodeData,
 } from '@/components/panels/schema-diagram/schemaDiagramTypes';
 import type {Path} from '@/utility/path';
 import {Handle, Position} from '@vue-flow/core';
@@ -25,6 +26,7 @@ const emit = defineEmits<{
   (e: 'select_element', path: Path): void;
   (e: 'update_enum_name', objectData: SchemaElementData, oldName: string, newName: string): void;
   (e: 'update_enum_values', data: SchemaEnumNodeData, newValues: string[]): void;
+  (e: 'extract_inlined_element', objectData: SchemaEnumNodeData): void;
   (e: 'delete_element', objectData: SchemaElementData): void;
 }>();
 
@@ -38,11 +40,16 @@ function isEnumEditable() {
   return isHighlighted();
 }
 
+function isDefinedInDefinitions() {
+  if (props.data.absolutePath.length < 2) {
+    return false;
+  }
+  const parentKey = props.data.absolutePath[props.data.absolutePath.length - 2];
+  return parentKey === '$defs' || parentKey === 'definitions';
+}
+
 function isHighlighted() {
-  return (
-    props.selectedData &&
-    pathToString(props.selectedData.absolutePath) === pathToString(props.data.absolutePath)
-  );
+  return props.selectedData && props.selectedData == props.data;
 }
 
 function updateEnumName() {
@@ -61,6 +68,10 @@ function deleteEnum() {
   emit('delete_element', props.data);
 }
 
+function extractInlinedObject() {
+  emit('extract_inlined_element', props.data);
+}
+
 function deleteEnumItem(index: number) {
   enumValues.value.splice(index, 1);
   emit('update_enum_values', props.data, enumValues.value);
@@ -79,19 +90,30 @@ function addEnumItem() {
     <Handle type="target" :position="props.targetPosition!" class="vue-flow__handle"></Handle>
     <p>&lt;enumeration&gt;</p>
 
-    <div v-if="!isEnumEditable()">
+    <div v-if="!isEnumEditable() || !isDefinedInDefinitions()">
       <b>
         {{ props.data.name }}
       </b>
 
+      <Button
+        v-if="!isDefinedInDefinitions() && isHighlighted()"
+        class="vue-flow-object-button"
+        size="small"
+        v-tooltip.bottom="'Extract inlined Object to definitions (will enable renaming and more)'"
+        @mousedown.stop
+        @click.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>
 
-    <div v-if="isEnumEditable()">
+    <div v-else>
       <InputText
         type="text"
         class="vue-flow-enum-name-inputtext"

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

@@ -91,7 +91,7 @@ function getHandleTop() {
       <span class="vue-flow__node-schemaattribute-type">: {{ props.data.typeDescription }}</span>
     </div>
 
-    <div v-if="isHighlighted()">
+    <div v-else>
       <InputText
         type="text"
         class="vue-flow-attribute-input-dimensions"

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   SchemaElementData,
+  SchemaEnumNodeData,
   SchemaObjectAttributeData,
   SchemaObjectNodeData,
 } from '@/components/panels/schema-diagram/schemaDiagramTypes';
@@ -26,6 +27,7 @@ const emit = defineEmits<{
   (e: 'select_element', path: Path): void;
   (e: 'zoom_into_element', path: Path): void;
   (e: 'delete_element', objectData: SchemaElementData): void;
+  (e: 'extract_inlined_element', objectData: SchemaObjectNodeData): void;
   (
     e: 'update_object_name',
     objectData: SchemaObjectNodeData,
@@ -52,6 +54,14 @@ function isNameEditable() {
   return (isHighlighted() || isAttributeHighlighted()) && props.data.hasUserDefinedName;
 }
 
+function isDefinedInDefinitions() {
+  if (props.data.absolutePath.length < 2) {
+    return false;
+  }
+  const parentKey = props.data.absolutePath[props.data.absolutePath.length - 2];
+  return parentKey === '$defs' || parentKey === 'definitions';
+}
+
 function clickedNode() {
   emit('select_element', props.data.absolutePath);
 }
@@ -90,6 +100,10 @@ function deleteObject() {
   deleteElement(props.data);
 }
 
+function extractInlinedObject() {
+  emit('extract_inlined_element', props.data);
+}
+
 function deleteElement(data: SchemaElementData) {
   emit('delete_element', data);
 }
@@ -121,13 +135,23 @@ function isAttributeHighlighted() {
     @dblclick="doubleClickedNode()">
     <Handle type="target" :position="props.targetPosition!" class="vue-flow__handle"></Handle>
 
-    <div v-if="!isNameEditable()">
+    <div v-if="!isNameEditable() || !isDefinedInDefinitions()">
       <b>
         {{ props.data.name }}
       </b>
+      <Button
+        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)'"
+        @mousedown.stop
+        @click.stop
+        @click="_ => extractInlinedObject()">
+        <FontAwesomeIcon :icon="'fa-wrench fa-solid'" />
+      </Button>
     </div>
 
-    <div v-if="isNameEditable()">
+    <div v-else>
       <InputText
         type="text"
         class="vue-flow-object-name-inputtext"

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

@@ -36,6 +36,7 @@ import {
 } from '@/components/panels/schema-diagram/typeUtils';
 import Button from 'primevue/button';
 import {pathToJsonPointer} from '@/utility/pathUtils';
+import {dataAt} from '@/utility/resolveDataAtPath';
 
 const emit = defineEmits<{
   (e: 'update_current_path', path: Path): void;
@@ -234,6 +235,19 @@ function updateObjectOrEnumName(objectData: SchemaElementData, oldName: string,
   // TODO: when renaming happens, also force update in the GUI
 }
 
+function extractInlinedElement(elementData: SchemaObjectNodeData | SchemaEnumNodeData) {
+  const oldElementPath = elementData.absolutePath;
+  const dataAtPath = dataAt(oldElementPath, schemaData.data.value);
+  const newElementId = findAvailableId(['$defs'], elementData.name, true);
+  schemaData.setDataAt(newElementId, dataAtPath);
+  const referenceToNewElement = '#' + pathToJsonPointer(newElementId);
+  schemaData.setDataAt(oldElementPath, {
+    $ref: referenceToNewElement,
+  });
+  elementData.absolutePath = newElementId;
+  selectElement(newElementId);
+}
+
 function updateAttributeName(attributeData: SchemaNodeData, oldName: string, newName: string) {
   // change name in node before replacing name in schema. Otherwise, when the schema change is detected, it would also compute
   // that a new node was added (because different name) and then rebuild whole graph.
@@ -285,11 +299,11 @@ function updateEnumValues(enumData: SchemaEnumNodeData, newValues: string[]) {
   schemaData.setDataAt(enumData.absolutePath, enumSchema);
 }
 
-function findAvailableId(path: Path, prefix: string): Path {
+function findAvailableId(path: Path, prefix: string, preferWithoutNumber: boolean = false): Path {
   let num: number = 1;
   let success = false;
   while (num <= 100) {
-    const id = prefix + num;
+    const id = num == 1 && preferWithoutNumber ? prefix : prefix + num;
     const fullPath = [...path, id];
     success = schemaData.dataAt(fullPath) === undefined;
     if (success) {
@@ -373,6 +387,7 @@ function addEnum() {
           @update_attribute_type="updateAttributeType"
           @delete_element="deleteElement"
           @add_attribute="addAttribute"
+          @extract_inlined_element="extractInlinedElement"
           :source-position="props.sourcePosition"
           :target-position="props.targetPosition"
           :selected-data="selectedData"
@@ -385,6 +400,7 @@ function addEnum() {
           @update_enum_name="updateObjectOrEnumName"
           @update_enum_values="updateEnumValues"
           @delete_element="deleteElement"
+          @extract_inlined_element="extractInlinedElement"
           :source-position="props.sourcePosition"
           :target-position="props.targetPosition"
           :selected-data="selectedData" />