616 implement data view panel that allows comparing entries of a list (…

…#617) * WIP array analysis panel * apply formatting changes * update to new primeVue version 4 (breaking major release) and adapt code accordingly * fix CombinedEditorComponent to use up all page size as available * remove unneeded dependencies * wip work on table. Todo: vertical sizing * update tests due to primevue migration * apply formatting changes * remove unneeded dependencies --------- Co-authored-by: Logende <[email protected]>
MetaConfigurator · Feb 6, 2025 · 8c7722b · 8c7722b
1 parent 324fa4e
commit 8c7722b
Show file tree

Hide file tree

Showing 35 changed files with 3,075 additions and 2,496 deletions.
diff --git a/meta_configurator/package-lock.json b/meta_configurator/package-lock.json
diff --git a/meta_configurator/package.json b/meta_configurator/package.json
@@ -25,7 +25,8 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@jsonhero/schema-infer": "^0.1.5",
-    "@vue-flow/core": "^1.33.6",
+    "@primevue/themes": "^4.2.5",
+    "@vue-flow/core": "^1.42.1",
     "@vueuse/core": "^10.6.0",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
@@ -45,8 +46,9 @@
     "node-fetch": "^3.3.1",
     "pinia": "^2.0.36",
     "primeicons": "^7.0.0",
-    "primevue": "^3.29.2",
+    "primevue": "^4.2.5",
     "vue": "^3.5.13",
+    "vue-flow": "^0.3.0",
     "vue-router": "^4.3.2",
     "yaml": "^2.3.1"
   },

diff --git a/meta_configurator/src/components/CombinedEditorComponent.vue b/meta_configurator/src/components/CombinedEditorComponent.vue
@@ -162,14 +162,18 @@ onUnmounted(() => {
   <ConfirmDialog />
 
   <div class="w-full h-full flex" style="max-height: 100%">
-    <main class="flex flex-col">
+    <main class="flex flex-col w-full h-full">
       <!-- toolbar -->
       <TopToolbar
         ref="topToolbarRef"
         :current-mode="props.sessionMode"
         @mode-selected="updateMode" />
       <div class="flex-grow overflow-hidden" ref="mainPanel" id="mainpanel">
-        <Splitter class="h-full" :layout="width < 600 ? 'vertical' : 'horizontal'" :key="panels">
+        <Splitter
+          class="h-full"
+          style="min-width: 0"
+          :layout="width < 600 ? 'vertical' : 'horizontal'"
+          :key="panels">
           <SplitterPanel
             v-for="(panel, index) in panels"
             :key="index + panel"

diff --git a/meta_configurator/src/components/dialogs/csvimport/ImportCsvDialog.vue b/meta_configurator/src/components/dialogs/csvimport/ImportCsvDialog.vue
@@ -5,10 +5,10 @@ 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 Select from 'primevue/select';
 import InputText from 'primevue/inputtext';
 import RadioButton from 'primevue/radiobutton';
-import InputSwitch from 'primevue/inputswitch';
+import ToggleSwitch from 'primevue/toggleswitch';
 import {CsvImportColumnMappingData} from '@/components/dialogs/csvimport/csvImportTypes';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 import {
@@ -248,7 +248,7 @@ defineExpose({show: openDialog, close: hideDialog});
         <div>
           <div class="flex align-items-center vertical-center">
             <label for="delimiter" class="mr-2"><b>Delimiter in the CSV document:</b></label>
-            <Dropdown
+            <Select
               id="delimiter"
               v-model="delimiter"
               :options="delimiterOptions"
@@ -259,7 +259,7 @@ defineExpose({show: openDialog, close: hideDialog});
             <label for="decimalSeparator" class="mr-2"
               ><b>Decimal Separator in the CSV document:</b></label
             >
-            <Dropdown
+            <Select
               id="decimalSeparator"
               v-model="decimalSeparator"
               class="small-input"
@@ -316,7 +316,7 @@ defineExpose({show: openDialog, close: hideDialog});
               <label class="mr-2">
                 <b>Primary key in new CSV:</b>
               </label>
-              <Dropdown
+              <Select
                 id="tableToExpand"
                 v-model="primaryKeyProp"
                 class="fixed-width"
@@ -327,7 +327,7 @@ defineExpose({show: openDialog, close: hideDialog});
               <label class="mr-2">
                 <b>Table to expand:</b>
               </label>
-              <Dropdown
+              <Select
                 id="tableToExpand"
                 v-model="tableToExpand"
                 class="fixed-width"
@@ -338,7 +338,7 @@ defineExpose({show: openDialog, close: hideDialog});
               <label class="mr-2">
                 <b>Foreign key in existing data:</b>
               </label>
-              <Dropdown
+              <Select
                 id="foreignKeyName"
                 v-model="foreignKey"
                 class="fixed-width"
@@ -353,7 +353,7 @@ defineExpose({show: openDialog, close: hideDialog});
             <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" />
+            <ToggleSwitch id="delimiter" v-model="isInferSchema" class="small-input" />
           </div>
 
           <p>

diff --git a/meta_configurator/src/components/dialogs/csvimport/importCsvUtils.ts b/meta_configurator/src/components/dialogs/csvimport/importCsvUtils.ts
@@ -15,6 +15,7 @@ import {
 } from '@/components/dialogs/csvimport/delimiterSeparatorUtils';
 import {type CsvError, parse} from 'csv-parse/browser/esm';
 import type {JsonSchemaType} from '@/schema/jsonSchemaType';
+import {identifyArraysInJson} from '@/utility/arrayPathUtils';
 
 export function requestUploadFileToRef(resultString: Ref<string>, resultTableName: Ref<string>) {
   const {open, onChange} = useFileDialog();
@@ -152,18 +153,7 @@ export function userStringToIdentifier(input: string, cutExtension: boolean = fa
 
 // note that this function does not look for a table within a table
 export function detectPossibleTablesInJson(json: any, path: Path = []): Path[] {
-  const tables: Path[] = [];
-  for (const key in json) {
-    if (json.hasOwnProperty(key)) {
-      const newPath = path ? [...path, key] : [key];
-      if (Array.isArray(json[key])) {
-        tables.push(newPath);
-      } else if (typeof json[key] === 'object' && json[key] !== null) {
-        tables.push(...detectPossibleTablesInJson(json[key], newPath));
-      }
-    }
-  }
-  return tables;
+  return identifyArraysInJson(json, path, false, true);
 }
 
 export function detectPropertiesOfTableInJson(json: any, tablePath: Path): string[] {

diff --git a/meta_configurator/src/components/dialogs/snapshot/SaveSnapshotDialog.vue b/meta_configurator/src/components/dialogs/snapshot/SaveSnapshotDialog.vue
@@ -5,7 +5,7 @@ import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
 import Message from 'primevue/message';
 import InputText from 'primevue/inputtext';
-import InputSwitch from 'primevue/inputswitch';
+import ToggleSwitch from 'primevue/toggleswitch';
 import Password from 'primevue/password';
 import {publishProjectLink, storeCurrentSnapshot} from '@/utility/backend/backendApi';
 
@@ -76,7 +76,7 @@ defineExpose({show: openDialog, close: hideDialog});
 
       <div class="flex align-items-center vertical-center">
         <label for="delimiter" class="mr-2"><b>Publish project:</b></label>
-        <InputSwitch id="delimiter" v-model="publishProject" class="small-input" />
+        <ToggleSwitch id="delimiter" v-model="publishProject" class="small-input" />
       </div>
 
       <div v-if="publishProject" class="vertical-layout">

diff --git a/meta_configurator/src/components/panels/ai-prompts/AiPromptsTemplate.vue b/meta_configurator/src/components/panels/ai-prompts/AiPromptsTemplate.vue
@@ -20,7 +20,7 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 import {setupAceMode, setupAceProperties} from '@/components/panels/shared-components/aceUtils';
 import {fixAndParseGeneratedJson, getApiKey} from '@/components/panels/ai-prompts/aiPromptUtils';
 import ApiKey from '@/components/panels/ai-prompts/ApiKey.vue';
-import {fetchExternalContent, fetchExternalContentText} from '@/utility/fetchExternalContent';
+import {fetchExternalContentText} from '@/utility/fetchExternalContent';
 import Panel from 'primevue/panel';
 
 const props = defineProps<{

diff --git a/meta_configurator/src/components/panels/ai-prompts/ApiKey.vue b/meta_configurator/src/components/panels/ai-prompts/ApiKey.vue
@@ -8,7 +8,7 @@ import Password from 'primevue/password';
 import Panel from 'primevue/panel';
 import SelectButton from 'primevue/selectbutton';
 import Message from 'primevue/message';
-import {useSettings} from '../../../settings/useSettings';
+import {useSettings} from '@/settings/useSettings';
 
 const apiKey: Ref<string> = ref('');
 const isPersistKey: Ref<boolean> = ref(true);

diff --git a/meta_configurator/src/components/panels/code-editor/AceEditor.vue b/meta_configurator/src/components/panels/code-editor/AceEditor.vue
@@ -12,7 +12,6 @@ import 'brace/mode/yaml';
 import 'brace/theme/clouds';
 import 'brace/theme/ambiance';
 import 'brace/theme/monokai';
-import {watchImmediate} from '@vueuse/core';
 import {setupAnnotationsFromValidationErrors} from '@/components/panels/code-editor/setupAnnotations';
 import {
   setupLinkToCurrentSelection,

diff --git a/meta_configurator/src/components/panels/code-editor/setupLinkToSelectionAndData.ts b/meta_configurator/src/components/panels/code-editor/setupLinkToSelectionAndData.ts
@@ -27,6 +27,7 @@ export function setupLinkToCurrentSelection(editor: Editor, mode: SessionMode) {
  * When the user clicks into the editor, we want to use the cursor position to determine which element from the data
  * the user clicked at. We then update the currentSelectedElement in the store accordingly.
  * @param editor the ace editor
+ * @param mode
  */
 function setupCursorPositionToSelectedPath(editor: Editor, mode: SessionMode) {
   editor.on(
@@ -58,6 +59,7 @@ function setupCursorPositionToSelectedPath(editor: Editor, mode: SessionMode) {
 /**
  * Listens to changes in the currentSelectedElement and update the cursor position accordingly.
  * @param editor the ace editor
+ * @param mode
  */
 function setupSelectedPathToCursorPosition(editor: Editor, mode: SessionMode) {
   watchArray(
@@ -100,6 +102,7 @@ function setupUpdateContentWhenDataChanges(editor: Editor, mode: SessionMode) {
 /**
  * When the content of the editor is modified by the user, we want to update the file data accordingly
  * @param editor the ace editor
+ * @param mode
  */
 function setupPropagationOfEditorContentChanges(editor: Editor, mode: SessionMode) {
   editor.on(

diff --git a/meta_configurator/src/components/panels/defaultPanelTypes.ts b/meta_configurator/src/components/panels/defaultPanelTypes.ts
@@ -6,6 +6,7 @@ import GuiEditorPanel from '@/components/panels/gui-editor/GuiEditorPanel.vue';
 import SchemaDiagramPanel from '@/components/panels/schema-diagram/SchemaDiagramPanel.vue';
 import DebugPanel from '@/components/panels/debug-panel/DebugPanel.vue';
 import AiPromptsPanel from '@/components/panels/ai-prompts/AiPromptsPanel.vue';
+import ListAnalysisPanel from './list-analysis/ListAnalysisPanel.vue';
 
 export const panelTypeTextEditor: PanelTypeDefinition = {
   getComponent: () => CodeEditorPanel,
@@ -39,6 +40,14 @@ export const panelTypeAiPrompts: PanelTypeDefinition = {
   name: 'aiPrompts',
 };
 
+export const panelTypeListAnalysis: PanelTypeDefinition = {
+  getComponent: () => ListAnalysisPanel,
+  supportedModes: [SessionMode.DataEditor],
+  label: 'Table View',
+  icon: 'fa-solid fa-table',
+  name: 'listAnalysis',
+};
+
 export const panelTypeDebug: PanelTypeDefinition = {
   getComponent: () => DebugPanel,
   supportedModes: [SessionMode.DataEditor, SessionMode.SchemaEditor, SessionMode.Settings],
@@ -55,5 +64,6 @@ export function registerDefaultPanelTypes() {
   panelTypeRegistry.registerPanelType('guiEditor', panelTypeGuiEditor);
   panelTypeRegistry.registerPanelType('schemaDiagram', panelTypeSchemaDiagram);
   panelTypeRegistry.registerPanelType('aiPrompts', panelTypeAiPrompts);
+  panelTypeRegistry.registerPanelType('listAnalysis', panelTypeListAnalysis);
   panelTypeRegistry.registerPanelType('debug', panelTypeDebug);
 }
diff --git a/meta_configurator/src/components/panels/gui-editor/GuiEditorPanelJsonSchema.vue b/meta_configurator/src/components/panels/gui-editor/GuiEditorPanelJsonSchema.vue
@@ -50,7 +50,7 @@ function updateData(path: Path, newValue: any) {
             sortedProperties[key] = parentData[key];
           }
         });
-        // after adding properties from the schema in proper order, add the rest of the properties
+        // after adding properties from the schema in proper order, add the rest of the properties f
         dataKeys.forEach(key => {
           if (!schemaKeys.includes(key)) {
             sortedProperties[key] = parentData[key];

diff --git a/meta_configurator/src/components/panels/gui-editor/PropertiesPanel.vue b/meta_configurator/src/components/panels/gui-editor/PropertiesPanel.vue
@@ -26,7 +26,7 @@ import {TreeNodeType} from '@/components/panels/gui-editor/configDataTreeNode';
 import {pathToString} from '@/utility/pathUtils';
 import SchemaInfoOverlay from '@/components/panels/gui-editor/SchemaInfoOverlay.vue';
 import {refDebounced, useDebounceFn} from '@vueuse/core';
-import type {TreeNode} from 'primevue/tree';
+import type {TreeNode} from 'primevue/treenode';
 import {focus, focusOnPath, makeEditableAndSelectContents} from '@/utility/focusUtils';
 import {
   getDataForMode,

diff --git a/meta_configurator/src/components/panels/gui-editor/SchemaInfoOverlay.vue b/meta_configurator/src/components/panels/gui-editor/SchemaInfoOverlay.vue
@@ -11,11 +11,10 @@ It emits the following events:
 -->
 <script setup lang="ts">
 import {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
-import OverlayPanel from 'primevue/overlaypanel';
-import {computed, Ref, ref} from 'vue';
+import Popover from 'primevue/popover';
+import {computed, type Ref, ref} from 'vue';
 import {describeSchema} from '@/schema/schemaDescriptor';
 import type {ErrorObject} from 'ajv';
-import {useCurrentSchema} from '@/data/useDataLink';
 import {useSessionStore} from '@/store/sessionStore';
 
 const schemaRef: Ref<JsonSchemaWrapper | undefined> = ref();
@@ -68,7 +67,7 @@ defineEmits<{hide: void}>();
 </script>
 
 <template>
-  <OverlayPanel
+  <Popover
     ref="panelRef"
     style="max-height: 30vmax"
     class="w-1/3 leading-normal"
@@ -84,7 +83,7 @@ defineEmits<{hide: void}>();
       v-html="schemaDescription"
       class="overflow-y-auto whitespace-pre-line"
       style="max-height: 28vmax"></div>
-  </OverlayPanel>
+  </Popover>
 </template>
 
 <style scoped></style>
diff --git a/meta_configurator/src/components/panels/gui-editor/SchemaInfoPanel.vue b/meta_configurator/src/components/panels/gui-editor/SchemaInfoPanel.vue
@@ -2,7 +2,6 @@
 import {computed} from 'vue';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
-import {useSessionStore} from '@/store/sessionStore';
 import type {SessionMode} from '@/store/sessionMode';
 import {getSchemaForMode, getSessionForMode} from '@/data/useDataLink';
 import {isSchemaEmpty} from '@/schema/schemaReadingUtils';

diff --git a/meta_configurator/src/components/panels/gui-editor/configDataTreeNode.ts b/meta_configurator/src/components/panels/gui-editor/configDataTreeNode.ts
@@ -1,4 +1,4 @@
-import type {TreeNode} from 'primevue/tree';
+import type {TreeNode} from 'primevue/treenode';
 import type {Path, PathElement} from '@/utility/path';
 import {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
 

diff --git a/meta_configurator/src/components/panels/gui-editor/configTreeNodeResolver.ts b/meta_configurator/src/components/panels/gui-editor/configTreeNodeResolver.ts
@@ -645,7 +645,7 @@ export class ConfigTreeNodeResolver {
       return false;
     }
     if (schema.items.isAlwaysFalse) {
-      return data?.length < schema.prefixItems?.length ?? 0;
+      return data?.length < (schema.prefixItems?.length ?? 0);
     }
     return true;
   }

diff --git a/meta_configurator/src/components/panels/gui-editor/properties/EnumProperty.vue b/meta_configurator/src/components/panels/gui-editor/properties/EnumProperty.vue
@@ -3,14 +3,13 @@ List dropdown for enum properties, also used for properties with multiple exampl
 -->
 <script setup lang="ts">
 import {computed} from 'vue';
-import Dropdown from 'primevue/dropdown';
+import Select from 'primevue/select';
 import _ from 'lodash';
 import {dataToString} from '@/utility/dataToString';
 import type {PathElement} from '@/utility/path';
 import type {ValidationResult} from '@/schema/validationService';
 import {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
 import {isReadOnly} from '@/components/panels/gui-editor/configTreeNodeReadingUtils';
-import InputText from 'primevue/inputtext';
 
 const props = defineProps<{
   propertyName: PathElement;
@@ -70,7 +69,7 @@ function isEditable() {
 </script>
 
 <template>
-  <Dropdown
+  <Select
     class="tableInput w-full"
     :class="{'underline decoration-wavy decoration-red-600': !props.validationResults.valid}"
     v-model="valueProperty"

diff --git a/meta_configurator/src/components/panels/gui-editor/properties/NumberProperty.vue b/meta_configurator/src/components/panels/gui-editor/properties/NumberProperty.vue
@@ -8,7 +8,6 @@ import {GuiConstants} from '@/constants';
 import type {ValidationResult} from '@/schema/validationService';
 import type {PathElement} from '@/utility/path';
 import {isReadOnly} from '@/components/panels/gui-editor/configTreeNodeReadingUtils';
-import InputText from 'primevue/inputtext';
 
 const props = defineProps<{
   propertyName: PathElement;

diff --git a/meta_configurator/src/components/panels/gui-editor/properties/OneOfSelectionProperty.vue b/meta_configurator/src/components/panels/gui-editor/properties/OneOfSelectionProperty.vue
@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import type {WritableComputedRef} from 'vue';
 import {computed, onMounted} from 'vue';
-import Dropdown from 'primevue/dropdown';
+import Select from 'primevue/select';
 import type {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
 import type {Path, PathElement} from '@/utility/path';
 import {pathToString} from '@/utility/pathUtils';
@@ -181,7 +181,7 @@ function applySchemaConstantsOnData(schema: JsonSchemaType, data: any): any {
 
 <template>
   <div>
-    <Dropdown
+    <Select
       class="tableInput w-full"
       v-model="valueProperty"
       :options="possibleOptions"

diff --git a/meta_configurator/src/components/panels/gui-editor/properties/OntologyUriProperty.vue b/meta_configurator/src/components/panels/gui-editor/properties/OntologyUriProperty.vue
@@ -14,7 +14,6 @@ import {findSuggestionsForSearchTerm} from '@/utility/rdf/findSuggestionsForSear
 import {findJsonLdPrefixes} from '@/utility/rdf/findJsonLdPrefixes';
 import type {SessionMode} from '@/store/sessionMode';
 import {getDataForMode} from '@/data/useDataLink';
-import InputText from 'primevue/inputtext';
 
 const props = defineProps<{
   propertyName: PathElement;

diff --git a/...onfigurator/src/components/panels/gui-editor/properties/__tests__/booleanProperty.test.ts b/...onfigurator/src/components/panels/gui-editor/properties/__tests__/booleanProperty.test.ts
@@ -1,4 +1,4 @@
-import {shallowMount} from '@vue/test-utils';
+import {mount} from '@vue/test-utils';
 import {afterEach, beforeEach, describe, expect, it, test, vi} from 'vitest';
 import BooleanProperty from '../BooleanProperty.vue';
 import SelectButton from 'primevue/selectbutton';
@@ -21,10 +21,10 @@ describe('BooleanProperty', () => {
   let wrapper: any;
   let selectButton: any;
 
-  function shallowMountBeforeEach(props: any) {
+  function mountBeforeEach(props: any) {
     beforeEach(() => {
       // @ts-ignore
-      wrapper = shallowMount(BooleanProperty, {
+      wrapper = mount(BooleanProperty, {
         props: props,
       });
       selectButton = wrapper.findComponent(SelectButton);
@@ -39,7 +39,7 @@ describe('BooleanProperty', () => {
     ['false', false],
     ['undefined', undefined],
   ])(`with value %s`, (type, data) => {
-    shallowMountBeforeEach({
+    mountBeforeEach({
       propertyName: 'foo',
       propertyData: data,
       validationResults: new ValidationResult([]),