669 reference helping feature (#971)

* add autocomplete support for schema references  - GUI View

* apply formatting changes

* updated autoref only for schemamode

* apply formatting changes

* Potential fix for pull request finding 'Unused variable, import, function or class'

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

* Reference Autocomplete  working when selected with mouse

* if ref - External value and when cleared it still shows the internal ref

* apply formatting changes

* Dialog box open twice issue resolved

* remove unused import

---------

Co-authored-by: Devesh0129 <Devesh0129@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
Co-authored-by: Felix Neubauer <felix@neuby.de>

Author: 3 people

meta_configurator/src/components/panels/gui-editor/properties/ReferenceProperty.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import {ref, watch, nextTick} from 'vue';
+import AutoComplete from 'primevue/autocomplete';
+import type {PathElement} from '@/utility/path';
+import type {ValidationResult} from '@/schema/validationUtils';
+import {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
+import {isReadOnly} from '@/components/panels/gui-editor/configTreeNodeReadingUtils';
+import {getDataForMode} from '@/data/useDataLink';
+import {useSettings} from '@/settings/useSettings';
+import type {SessionMode} from '@/store/sessionMode';
+import {SessionMode as SessionModeEnum} from '@/store/sessionMode';
+import {getAvailableDefinitionPaths} from '@/schema/schemaReadingUtils';
+
+const props = defineProps<{
+  propertyName: PathElement;
+  propertyData: string | undefined;
+  propertySchema: JsonSchemaWrapper;
+  validationResults: ValidationResult;
+  sessionMode: SessionMode;
+}>();
+
+const settings = useSettings();
+
+const emit = defineEmits<{
+  (e: 'update:propertyData', newValue: string | undefined): void;
+}>();
+
+const currentValue = ref(props.propertyData ?? '');
+const filteredSuggestions = ref<string[]>([]);
+const autoCompleteRef = ref();
+
+watch(
+  () => props.propertyData,
+  newVal => {
+    currentValue.value = newVal ?? '';
+  }
+);
+
+function getDefinitions() {
+  const userSchemaData = getDataForMode(SessionModeEnum.SchemaEditor).data.value;
+  return getAvailableDefinitionPaths(userSchemaData);
+}
+
+function onFocus() {
+  filteredSuggestions.value = getDefinitions();
+  nextTick(() => autoCompleteRef.value?.show());
+}
+
+function onInput(event: Event) {
+  const val = (event.target as HTMLInputElement).value;
+  currentValue.value = val;
+  const query = val.toLowerCase();
+  filteredSuggestions.value =
+    query === '' ? getDefinitions() : getDefinitions().filter(p => p.toLowerCase().includes(query));
+}
+
+function searchSuggestions(event: {query: string}) {
+  const query = event.query.toLowerCase();
+  filteredSuggestions.value =
+    query === '' ? getDefinitions() : getDefinitions().filter(p => p.toLowerCase().includes(query));
+}
+
+function onItemSelect(event: {value: string}) {
+  currentValue.value = event.value;
+  emit('update:propertyData', event.value);
+  nextTick(() => autoCompleteRef.value?.hide());
+}
+
+function onBlur() {
+  emit('update:propertyData', currentValue.value || undefined);
+}
+</script>
+
+<template>
+  <AutoComplete
+    ref="autoCompleteRef"
+    class="tableInput w-full"
+    :class="{'underline decoration-wavy decoration-red-600': !props.validationResults.valid}"
+    v-model="currentValue"
+    :suggestions="filteredSuggestions"
+    :editable="true"
+    :disabled="isReadOnly(props.propertySchema)"
+    :input-style="{width: '100%'}"
+    :min-length="0"
+    placeholder="#/$defs/MyType or external URL"
+    @complete="searchSuggestions"
+    @focus="onFocus"
+    @input="onInput"
+    @item-select="onItemSelect"
+    @blur="onBlur"
+    @keyup.enter="emit('update:propertyData', currentValue || undefined)"
+    @keydown.down.stop
+    @keydown.up.stop
+    @keydown.left.stop
+    @keydown.right.stop>
+    <template #option="{option}">
+      <div @mousedown.prevent="onItemSelect({value: option})">
+        {{ option }}
+      </div>
+    </template>
+  </AutoComplete>
+</template>
+
+<style scoped>
+.tableInput {
+  border: v-bind("settings.guiEditor.showBorderAroundInputFields ? '1px solid #d1d5db' : 'none'");
+  box-shadow: none;
+}
+</style>

meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts

@@ -17,6 +17,7 @@ import {getDataForMode, getSessionForMode, getValidationForMode} from '@/data/us
 import {typeSchema} from '@/schema/schemaProcessingUtils';
 import type {SessionMode} from '@/store/sessionMode';
 import OntologyUriProperty from '@/components/panels/gui-editor/properties/OntologyUriProperty.vue';
+import ReferenceProperty from '@/components/panels/gui-editor/properties/ReferenceProperty.vue';
 
 /**
  * Resolves the corresponding component for a given node.
@@ -61,7 +62,13 @@ export function resolveCorrespondingComponent(
       isTypeUnion: true,
     });
   }
-
+  if (mode == 'schemaEditor' && nodeData.schema.hasType('string') && nodeData.name === '$ref') {
+    // @ts-ignore
+    return h(ReferenceProperty, {
+      ...propsObject,
+      sessionMode: mode,
+    });
+  }
   if (nodeData.schema.hasType('string') && hasTwoOrMoreExamples(nodeData.schema)) {
     // @ts-ignore
     return h(EnumProperty, {

meta_configurator/src/data/managedJsonSchema.ts

@@ -14,7 +14,6 @@ import {clearPreprocessedRefSchemaCache} from '@/schema/schemaLazyResolver';
 import {writeSchemaRequiredDefaultsToData} from '@/schema/writeDefaultsToData';
 import {useDataSource} from '@/data/dataSource';
 import {detectSchemaFeatures, type SchemaFeatures} from '@/schema/detectSchemaFeatures.ts';
-
 /**
  * This class manages the schema and provides easy access to its content.
  */
@@ -126,7 +125,6 @@ export class ManagedJsonSchema {
       this.mode
     );
     this._schemaFeatures!.value = detectSchemaFeatures(this._schemaRaw.value);
-
     if (useDataSource().newSchemaWasFetched) {
       // add defaults to user data, but only when new schema was fetched, not after every schema edit
       const data = getDataForMode(this.mode);

meta_configurator/src/schema/schemaReadingUtils.ts

@@ -36,7 +36,23 @@ export function getTypeDescription(schema: JsonSchemaObjectType): string {
 
   return type;
 }
+export function getAvailableDefinitionPaths(schema: any): string[] {
+  const paths: string[] = [];
 
+  if (schema?.$defs) {
+    Object.keys(schema.$defs).forEach(key => {
+      paths.push(`#/$defs/${key}`);
+    });
+  }
+
+  if (schema?.definitions) {
+    Object.keys(schema.definitions).forEach(key => {
+      paths.push(`#/definitions/${key}`);
+    });
+  }
+
+  return paths.sort();
+}
 export function isSchemaEmpty(schema: JsonSchemaType): boolean {
   if (schema === undefined || schema === null) {
     return true;