Feature/incorporate more feedback (#559)

* make github link support more robust

* apply formatting changes

---------

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

Author: Logende

meta_configurator/src/components/dialogs/csvimport/ImportCsvDialog.vue

@@ -4,6 +4,7 @@ import {type Ref, ref, watch} from 'vue';
 import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
 import Divider from 'primevue/divider';
+import Panel from 'primevue/panel';
 import Dropdown from 'primevue/dropdown';
 import InputText from 'primevue/inputtext';
 import RadioButton from 'primevue/radiobutton';
@@ -239,151 +240,160 @@ defineExpose({show: openDialog, close: hideDialog});
           class="text-green-500 ml-2" />
       </div>
 
-      <div v-if="currentUserDataString.length > 0">
-        <div class="flex align-items-center vertical-center">
-          <label for="delimiter" class="mr-2"><b>Delimiter in the CSV document:</b></label>
-          <Dropdown
-            id="delimiter"
-            v-model="delimiter"
-            :options="delimiterOptions"
-            :option-label="option => option.label" />
-        </div>
-
-        <div class="flex align-items-center vertical-center">
-          <label for="decimalSeparator" class="mr-2"
-            ><b>Decimal Separator in the CSV document:</b></label
-          >
-          <Dropdown
-            id="decimalSeparator"
-            v-model="decimalSeparator"
-            class="small-input"
-            :options="decimalSeparatorOptions"
-            :option-label="option => option.label" />
-        </div>
-
-        <p v-if="errorMessage.length > 0" style="color: red; white-space: pre-line">
-          {{ errorMessage }}
-        </p>
-      </div>
-
-      <div
-        v-if="currentUserCsv.length > 0"
-        class="flex flex-wrap justify-content-center gap-3 bigger-dialog-content">
-        <Divider />
-
-        <div class="flex flex-wrap gap-4">
-          <div class="flex items-center">
-            <RadioButton
-              v-model="isExpandWithLookupTables"
-              inputId="independentTable"
-              name="independentTable"
-              :value="false" />
-            <label for="independentTable" class="ml-2">Independent Table</label>
-          </div>
-          <div class="flex items-center">
-            <RadioButton
-              v-model="isExpandWithLookupTables"
-              inputId="expandWithLookupTable"
-              name="expandWithLookupTable"
-              :value="true"
-              :disabled="possiblePreviousTables.length == 0" />
-            <label for="expand" class="ml-2">Expand with Lookup Table</label>
-          </div>
-        </div>
-        <div v-if="!isExpandWithLookupTables">
-          <span>Import this CSV as a standalone table.</span>
-
-          <div class="flex align-items-center vertical-center">
-            <label for="delimiter" class="mr-2">
-              <b>Path for the resulting array in the document:</b>
-            </label>
-            <InputText v-model="pathBeforeRowIndex" class="fixed-width" />
-          </div>
-        </div>
-        <div v-else>
-          <span
-            >Use this CSV to expand an existing table by matching foreign keys with primary keys
-            from the lookup table.</span
-          >
-
-          <div class="flex align-items-center vertical-center">
-            <label class="mr-2">
-              <b>Primary key in new CSV:</b>
-            </label>
-            <Dropdown
-              id="tableToExpand"
-              v-model="primaryKeyProp"
-              class="fixed-width"
-              :options="possiblePrimaryKeyProps"
-              :option-label="option => option.label" />
-          </div>
+      <Panel
+        v-if="currentUserDataString.length > 0"
+        header="Import Options"
+        toggleable
+        :collapsed="true">
+        <div>
           <div class="flex align-items-center vertical-center">
-            <label class="mr-2">
-              <b>Table to expand:</b>
-            </label>
+            <label for="delimiter" class="mr-2"><b>Delimiter in the CSV document:</b></label>
             <Dropdown
-              id="tableToExpand"
-              v-model="tableToExpand"
-              class="fixed-width"
-              :options="possiblePreviousTables"
+              id="delimiter"
+              v-model="delimiter"
+              :options="delimiterOptions"
               :option-label="option => option.label" />
           </div>
+
           <div class="flex align-items-center vertical-center">
-            <label class="mr-2">
-              <b>Foreign key in existing data:</b>
-            </label>
+            <label for="decimalSeparator" class="mr-2"
+              ><b>Decimal Separator in the CSV document:</b></label
+            >
             <Dropdown
-              id="foreignKeyName"
-              v-model="foreignKey"
-              class="fixed-width"
-              :options="possibleForeignKeyProps"
+              id="decimalSeparator"
+              v-model="decimalSeparator"
+              class="small-input"
+              :options="decimalSeparatorOptions"
               :option-label="option => option.label" />
           </div>
+
+          <p v-if="errorMessage.length > 0" style="color: red; white-space: pre-line">
+            {{ errorMessage }}
+          </p>
         </div>
 
-        <Divider />
+        <div
+          v-if="currentUserCsv.length > 0"
+          class="flex flex-wrap justify-content-center gap-3 bigger-dialog-content">
+          <Divider />
+
+          <div class="flex flex-wrap gap-4">
+            <div class="flex items-center">
+              <RadioButton
+                v-model="isExpandWithLookupTables"
+                inputId="independentTable"
+                name="independentTable"
+                :value="false" />
+              <label for="independentTable" class="ml-2">Independent Table</label>
+            </div>
+            <div class="flex items-center">
+              <RadioButton
+                v-model="isExpandWithLookupTables"
+                inputId="expandWithLookupTable"
+                name="expandWithLookupTable"
+                :value="true"
+                :disabled="possiblePreviousTables.length == 0" />
+              <label for="expand" class="ml-2">Expand with Lookup Table</label>
+            </div>
+          </div>
+          <div v-if="!isExpandWithLookupTables">
+            <span>Import this CSV as a standalone table.</span>
+
+            <div class="flex align-items-center vertical-center">
+              <label for="delimiter" class="mr-2">
+                <b>Path for the resulting array in the document:</b>
+              </label>
+              <InputText v-model="pathBeforeRowIndex" class="fixed-width" />
+            </div>
+          </div>
+          <div v-else>
+            <span
+              >Use this CSV to expand an existing table by matching foreign keys with primary keys
+              from the lookup table.</span
+            >
+
+            <div class="flex align-items-center vertical-center">
+              <label class="mr-2">
+                <b>Primary key in new CSV:</b>
+              </label>
+              <Dropdown
+                id="tableToExpand"
+                v-model="primaryKeyProp"
+                class="fixed-width"
+                :options="possiblePrimaryKeyProps"
+                :option-label="option => option.label" />
+            </div>
+            <div class="flex align-items-center vertical-center">
+              <label class="mr-2">
+                <b>Table to expand:</b>
+              </label>
+              <Dropdown
+                id="tableToExpand"
+                v-model="tableToExpand"
+                class="fixed-width"
+                :options="possiblePreviousTables"
+                :option-label="option => option.label" />
+            </div>
+            <div class="flex align-items-center vertical-center">
+              <label class="mr-2">
+                <b>Foreign key in existing data:</b>
+              </label>
+              <Dropdown
+                id="foreignKeyName"
+                v-model="foreignKey"
+                class="fixed-width"
+                :options="possibleForeignKeyProps"
+                :option-label="option => option.label" />
+            </div>
+          </div>
 
-        <div class="flex align-items-center vertical-center">
-          <label for="delimiter" class="mr-2"><b>Infer and generate schema for the data:</b></label>
-          <InputSwitch id="delimiter" v-model="isInferSchema" class="small-input" />
-        </div>
+          <Divider />
 
-        <p>
-          CSV file has {{ currentUserCsv.length }} rows and
-          {{ currentColumnMapping.length }} columns (attributes).
-        </p>
-        <p>Define the mapping from the CSV to the JSON document for each attribute.</p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>CSV Column</th>
-              <th>JSON Property Identifier</th>
-              <!--th v-if="isInferSchema">Property Schema Title</--th-->
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="column in currentColumnMapping">
-              <td>{{ column.name }}</td>
-              <td>
-                <span class="text-xs">/{{ column.pathBeforeRowIndex }}/ROW_INDEX/</span>
-                <span class="text-xs" v-if="isExpandWithLookupTables">{{ foreignKey.value }}/</span>
-                <InputText v-model="column.pathAfterRowIndex" class="fixed-width" />
-              </td>
-              <!--td v-if="isInferSchema">
+          <div class="flex align-items-center vertical-center">
+            <label for="delimiter" class="mr-2"
+              ><b>Infer and generate schema for the data:</b></label
+            >
+            <InputSwitch id="delimiter" v-model="isInferSchema" class="small-input" />
+          </div>
+
+          <p>
+            CSV file has {{ currentUserCsv.length }} rows and
+            {{ currentColumnMapping.length }} columns (attributes).
+          </p>
+          <p>Define the mapping from the CSV to the JSON document for each attribute.</p>
+
+          <table>
+            <thead>
+              <tr>
+                <th>CSV Column</th>
+                <th>JSON Property Identifier</th>
+                <!--th v-if="isInferSchema">Property Schema Title</--th-->
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="column in currentColumnMapping">
+                <td>{{ column.name }}</td>
+                <td>
+                  <span class="text-xs">/{{ column.pathBeforeRowIndex }}/ROW_INDEX/</span>
+                  <span class="text-xs" v-if="isExpandWithLookupTables"
+                    >{{ foreignKey.value }}/</span
+                  >
+                  <InputText v-model="column.pathAfterRowIndex" class="fixed-width" />
+                </td>
+                <!--td v-if="isInferSchema">
                 <InputText v-model="column.titleInSchema" class="fixed-width" />
               </td-->
-            </tr>
-          </tbody>
-        </table>
-
-        <Divider />
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </Panel>
 
-        <Button
-          @click="submitImport"
-          class="p-button-raised p-button-rounded"
-          label="Import"></Button>
-      </div>
+      <Button
+        v-if="currentUserCsv.length > 0"
+        @click="submitImport"
+        class="p-button-raised p-button-rounded"
+        label="Import"></Button>
     </div>
   </Dialog>
 </template>

meta_configurator/src/components/panels/gui-editor/GuiEditorPanelJsonSchema.vue

@@ -5,8 +5,15 @@ import PropertiesPanel from '@/components/panels/gui-editor/PropertiesPanel.vue'
 import type {Path} from '@/utility/path';
 import {computed} from 'vue';
 import {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
-import {getDataForMode, getSessionForMode} from '@/data/useDataLink';
+import {
+  getDataForMode,
+  getSchemaForMode,
+  getSessionForMode,
+  useCurrentSchema,
+} from '@/data/useDataLink';
 import type {SessionMode} from '@/store/sessionMode';
+import {dataPathToSchemaPath} from '@/utility/pathUtils';
+import _ from 'lodash';
 
 const props = defineProps<{
   sessionMode: SessionMode;
@@ -20,6 +27,48 @@ function updatePath(newPath: Path) {
 }
 
 function updateData(path: Path, newValue: any) {
+  if (path.length > 0) {
+    const dataAtPath = data.dataAt(path);
+
+    if (dataAtPath == null) {
+      // if the element is new, we add it to the parent object in a sorted way
+      const parentPath = path.slice(0, path.length - 1);
+      const parentSchemaPath = dataPathToSchemaPath(parentPath);
+      const parentSchemaProps = getSchemaForMode(props.sessionMode).effectiveSchemaAtPath(
+        parentSchemaPath
+      ).schema.properties;
+      const parentData = structuredClone(data.dataAt(parentPath));
+      if (!_.isEmpty(parentSchemaProps) && !_.isEmpty(parentData)) {
+        // only proceed with property sorting when parent schema and data are not empty
+        // warning: this function only works for normal properties, not for composition, conditionals and other advanced features
+        // for those advanced features, the new property will be added at the end of the object
+        // TODO: implement sorting for advanced features. This will be more complicated and will require a lot of testing
+        const schemaKeys = Object.keys(parentSchemaProps);
+        const dataKeys = Object.keys(parentData);
+        const newElementKey = path[path.length - 1];
+        parentData[newElementKey] = newValue; // Add the new property
+
+        // sort the document properties based on the order of schema properties
+        const sortedProperties: {[key: string]: any} = {};
+        schemaKeys.forEach(key => {
+          if (dataKeys.includes(key) || key === newElementKey) {
+            sortedProperties[key] = parentData[key];
+          }
+        });
+        // after adding properties from the schema in proper order, add the rest of the properties
+        dataKeys.forEach(key => {
+          if (!schemaKeys.includes(key)) {
+            sortedProperties[key] = parentData[key];
+          }
+        });
+
+        // if properties were sorted, update the parent object instead of the new property
+        path = parentPath;
+        newValue = sortedProperties;
+      }
+    }
+  }
+
   data.setDataAt(path, newValue);
 }
 

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

@@ -174,8 +174,11 @@ function updateGraph(forceRebuild: boolean = false) {
     // only data updated or nodes removed
     const nodesToRemove = updateNodeData(activeNodes.value, vueFlowGraph.nodes);
     activeNodes.value = activeNodes.value.filter(node => !nodesToRemove.includes(node.id));
+
     // we still update edges, because they might have changed
+    // todo: check if the edges are updated and only then trigger layouting
     activeEdges.value = vueFlowGraph.edges;
+    graphNeedsLayouting = true;
   }
 
   // if not on root level but current path is set: show only subgraph
@@ -188,8 +191,10 @@ function updateGraph(forceRebuild: boolean = false) {
     layoutGraph(graphDirection.value, false);
   }
 
-  if (!graphNeedsLayouting && schemaSession.currentSelectedElement.value) {
-    fitViewForElementByPath(schemaSession.currentSelectedElement.value);
+  if (schemaSession.currentSelectedElement.value) {
+    nextTick(() => {
+      fitViewForElementByPath(schemaSession.currentSelectedElement.value);
+    });
   }
 }