update GUI tree when data changes structurally (#890)

* update GUI tree when data changes structurally

* apply formatting changes

---------

Co-authored-by: Logende <[email protected]>

Author: Logende

meta_configurator/package-lock.json

@@ -45,7 +45,7 @@
     "js-yaml": "^4.1.0",
     "json-cst": "^1.2.0",
     "json-pointer": "^0.6.2",
-    "json-schema-faker": "^0.5.8",
+    "json-schema-faker": "^0.5.9",
     "json-schema-merge-allof": "^0.8.1",
     "json-schema-ref-parser": "^9.0.9",
     "json-schema-resolver": "^3.0.0",

meta_configurator/package.json

@@ -6,7 +6,7 @@ It also contains the logic for adding, removing and renaming properties.
 TODO: This component is too big. Some of the logic should be moved to other files.
 -->
 <script setup lang="ts">
-import {onMounted, type Ref} from 'vue';
+import {onBeforeUnmount, onMounted, type Ref} from 'vue';
 import {ref, watch} from 'vue';
 import TreeTable from 'primevue/treetable';
 import Column from 'primevue/column';
@@ -36,8 +36,9 @@ import {
 } from '@/data/useDataLink';
 import {dataAt} from '@/utility/resolveDataAtPath';
 import type {SessionMode} from '@/store/sessionMode';
-import _ from 'lodash';
+import _, {debounce} from 'lodash';
 import {replacePropertyNameUtils} from '@/utility/renameUtils';
+import {isStructuralChangeInInstance} from '@/components/panels/gui-editor/isStructuralChangeInInstance.ts';
 
 const props = defineProps<{
   currentSchema: JsonSchemaWrapper;
@@ -63,6 +64,15 @@ const data = getDataForMode(props.sessionMode);
 // to avoid scrolling on a click in the GUI itself, we remember the last path clicked by the user in the GUI and do not scroll when the user clicks on the same path again
 const lastClickedElement = ref<Path>([]);
 
+const treeNodeResolver = new ConfigTreeNodeResolver();
+
+const loading = ref(false);
+const loadingDebounced = refDebounced(loading, 100);
+
+const treeTableFilters = ref<Record<string, string>>({});
+
+const currentTree = ref<GuiEditorTreeNode>();
+
 watch(
   session.currentSelectedElement,
   () => {
@@ -95,22 +105,33 @@ onMounted(() => {
   updateTree(true);
 });
 
+onBeforeUnmount(() => {
+  debouncedUpdateTreeForDataChange.cancel();
+});
+
+// update tree when the data changes in a significant way (change not of values but of structure)
+// also uses debouncing
+watch(getDataForMode(props.sessionMode).data, (newValue, oldValue) => {
+  debouncedUpdateTreeForDataChange(oldValue, newValue);
+});
+
+const debouncedUpdateTreeForDataChange = debounce(
+  (oldValue, newValue) => {
+    if (isStructuralChangeInInstance(oldValue, newValue)) {
+      updateTree();
+    }
+  },
+  1000, // 1 second
+  {leading: false, trailing: true} // trailing = after stopped typing
+);
+
 // update tree when the current path changes
 watch(session.currentPath, () => {
   updateTree();
   focusOnFirstProperty();
   allowShowOverlay.value = true; // reset in case the user was editing a property name
 });
 
-const treeNodeResolver = new ConfigTreeNodeResolver();
-
-const loading = ref(false);
-const loadingDebounced = refDebounced(loading, 100);
-
-const treeTableFilters = ref<Record<string, string>>({});
-
-const currentTree = ref<GuiEditorTreeNode>();
-
 /**
  * Compute the tree that should be displayed and expand all nodes that were expanded before.
  */

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

@@ -0,0 +1,118 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+import {isStructuralChangeInInstance} from '@/components/panels/gui-editor/isStructuralChangeInInstance.ts';
+
+describe('isStructuralChangeInInstance', () => {
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
+  });
+
+  it('two identical arrays', async () => {
+    const oldIns = [1, 2, 3, {a: 1}];
+    const newIns = [1, 2, 3, {a: 1}];
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(false);
+  });
+
+  it('two identical objects', async () => {
+    const oldIns = {a: 1, b: 2, c: {d: 3}};
+    const newIns = {a: 1, b: 2, c: {d: 3}};
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(false);
+  });
+
+  it('two identical primitives of each type', async () => {
+    expect(isStructuralChangeInInstance(1, 1)).toBe(false);
+    expect(isStructuralChangeInInstance('string', 'string')).toBe(false);
+    expect(isStructuralChangeInInstance(true, true)).toBe(false);
+    expect(isStructuralChangeInInstance(null, null)).toBe(false);
+  });
+
+  it('two different primitives of each type', async () => {
+    expect(isStructuralChangeInInstance(1, 2)).toBe(false);
+    expect(isStructuralChangeInInstance('string', 'different string')).toBe(false);
+    expect(isStructuralChangeInInstance(true, false)).toBe(false);
+
+    expect(isStructuralChangeInInstance(null, undefined)).toBe(true);
+  });
+
+  it('intermixed primitive types', async () => {
+    expect(isStructuralChangeInInstance(1, 'string')).toBe(false);
+    expect(isStructuralChangeInInstance(true, null)).toBe(false);
+
+    expect(isStructuralChangeInInstance(undefined, 1)).toBe(true);
+  });
+
+  it('primitive to object', async () => {
+    const oldIns = 1;
+    const newIns = {a: 1};
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(true);
+  });
+
+  it('primitive to array', async () => {
+    const oldIns = 1;
+    const newIns = [1];
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(true);
+  });
+
+  it('object where only values changed but not keys', async () => {
+    const oldIns = {a: 1, b: 2};
+    const newIns = {a: 2, b: 3};
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(false);
+  });
+
+  it('array where only values changed but not keys', async () => {
+    const oldIns = [1, 2, 3];
+    const newIns = [2, 3, 4];
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(false);
+  });
+
+  it('object where keys have changed', async () => {
+    const oldIns = {a: 1, b: 2};
+    const newIns = {a: 1, c: 2};
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(true);
+  });
+
+  it('object where new key was added', async () => {
+    const oldIns = {a: 1};
+    const newIns = {a: 1, b: 2};
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(true);
+  });
+
+  it('object where a key was removed', async () => {
+    const oldIns = {a: 1, b: 2};
+    const newIns = {a: 1};
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(true);
+  });
+
+  it('array where count has changed', async () => {
+    const oldIns = [1, 2, 3];
+    const newIns = [1, 2, 3, 4];
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(true);
+  });
+
+  it('array where nested object has changed', async () => {
+    // only value in object changed -> no structural change
+    const oldIns = [1, 2, {a: 1}];
+    const newIns = [1, 2, {a: 2}];
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(false);
+
+    // key in object changed -> structural change
+    const oldIns2 = [1, 2, {a: 1}];
+    const newIns2 = [1, 2, {b: 1}];
+    expect(isStructuralChangeInInstance(oldIns2, newIns2)).toBe(true);
+  });
+
+  it('nested object which changed', async () => {
+    // only value in nested object changed -> no structural change
+    const oldIns = {a: 1, b: {c: 1}};
+    const newIns = {a: 1, b: {c: 2}};
+    expect(isStructuralChangeInInstance(oldIns, newIns)).toBe(false);
+
+    // key in nested object changed -> structural change
+    const oldIns2 = {a: 1, b: {c: 1}};
+    const newIns2 = {a: 1, b: {d: 1}};
+    expect(isStructuralChangeInInstance(oldIns2, newIns2)).toBe(true);
+  });
+});

meta_configurator/src/components/panels/gui-editor/__tests__/isStructuralChangeInInstance.test.ts

@@ -0,0 +1,61 @@
+import type {GuiEditorTreeNode} from '@/components/panels/gui-editor/configDataTreeNode.ts';
+
+export function isStructuralChangeInInstance(oldObject: any, newObject: any): boolean {
+  // algorithm to determine whether any key or structure has changed between oldObject and newObject
+  // changes in values of existing keys are not considered structural changes
+  // the element might also be an array, in which case we need to check for changes in the length of the array and the keys of the objects in the array
+  // also this algorithm is recursive, so if there are nested objects or arrays, we need to check for structural changes in those as well
+
+  // if both are of primitive type, we can skip the check for structural changes
+  if (isOfPrimitiveType(oldObject) && isOfPrimitiveType(newObject)) {
+    return false;
+  }
+
+  // otherwise, if the types of oldObject and newObject are different, we can consider it a structural change
+  if (typeof oldObject !== typeof newObject) {
+    return true;
+  }
+
+  // logic for arrays
+  if (Array.isArray(oldObject) && Array.isArray(newObject)) {
+    if (oldObject.length !== newObject.length) {
+      return true;
+    }
+    for (let i = 0; i < oldObject.length; i++) {
+      if (isStructuralChangeInInstance(oldObject[i], newObject[i])) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // logic for objects
+  if (typeof oldObject === 'object' && oldObject !== null && newObject !== null) {
+    const oldKeys = Object.keys(oldObject);
+    const newKeys = Object.keys(newObject);
+
+    if (oldKeys.length !== newKeys.length) {
+      return true;
+    }
+
+    for (const key of oldKeys) {
+      if (!newKeys.includes(key)) {
+        return true;
+      }
+      if (isStructuralChangeInInstance(oldObject[key], newObject[key])) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+function isOfPrimitiveType(value: any): boolean {
+  return (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    value === null
+  );
+}