Merge branch '336-pql-interpreter-view' into 'master'

tomash87 · tomash87 · commit f4b8a99efb4d · 2025-01-12T09:33:53.000Z
feat: redesign the PQL interpreter view for better user experience

See merge request processm-team/processm!344

Former-commit-id: 1f788738da853d6a27a23927c3137e1319cea06e
diff --git a/pom.xml b/pom.xml
@@ -45,7 +45,7 @@
     </modules>
 
     <properties>
-        <revision>0.7.1${revision.suffix}</revision>
+        <revision>0.7.2${revision.suffix}</revision>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
         <kotlin.version>1.8.22</kotlin.version>
diff --git a/processm.core/src/test/kotlin/processm/core/log/hierarchical/DBHierarchicalXESInputStreamWithQueryTests.kt b/processm.core/src/test/kotlin/processm/core/log/hierarchical/DBHierarchicalXESInputStreamWithQueryTests.kt
@@ -1,5 +1,6 @@
 package processm.core.log.hierarchical
 
+import org.junit.platform.commons.util.Preconditions.condition
 import processm.core.DBTestHelper.dbName
 import processm.core.log.attribute.Attribute.CONCEPT_NAME
 import processm.core.log.attribute.AttributeMap.Companion.SEPARATOR
@@ -827,6 +828,16 @@ class DBHierarchicalXESInputStreamWithQueryTests : DBHierarchicalXESInputStreamW
         assertTrue(log.traces.all { t -> t.events.count() <= 3 })
     }
 
+    @Test
+    fun `limits do not affect upper scopes`() {
+        val totalLogs = (q("select count(l:id)").first().attributes["count(log:identity:id)"] as Long).toInt()
+        condition(totalLogs >= 2, "This test requires at least two event logs")
+
+        assertEquals(totalLogs, q("select l:name limit l:$totalLogs, t:1, e:1").count())
+        assertEquals(totalLogs, q("select l:name limit l:$totalLogs, e:1").count())
+        assertEquals(totalLogs, q("select l:name limit l:$totalLogs, t:1").count())
+    }
+
     @Test
     fun offsetSingleTest() {
         val stream = q("where l:id=$journal offset l:1")
diff --git a/processm.core/src/test/kotlin/processm/core/querylanguage/QueryTests.kt b/processm.core/src/test/kotlin/processm/core/querylanguage/QueryTests.kt
@@ -1087,6 +1087,16 @@ class QueryTests {
         assertEquals(PQLSyntaxException.Problem.DecimalPartDropped, (query.warning as PQLSyntaxException).problem)
     }
 
+    @Test
+    fun applyLimitsTest() {
+        val query = Query("limit t:1, e:1")
+        query.applyLimits(10, 20, 30)
+
+        assertEquals(10, query.limit[Scope.Log])
+        assertEquals(1, query.limit[Scope.Trace])
+        assertEquals(1, query.limit[Scope.Event])
+    }
+
     @Test
     fun offsetSingleTest() {
         val query = Query("offset l:1")
diff --git a/processm.launcher/src/test/kotlin/processm/selenium/AutomaticEtlTest.kt b/processm.launcher/src/test/kotlin/processm/selenium/AutomaticEtlTest.kt
@@ -184,11 +184,11 @@ class AutomaticEtlTest : SeleniumBase() {
             forEach { click(it) }
         }
         recorder?.take()
-        val headers = driver.findElements(By.xpath("//*[@name='xes-data-table']//thead/tr/th")).withIndex()
+        val headers = driver.findElements(By.xpath("(//*[@name='xes-data-table'])[2]//thead/tr/th")).withIndex()
             .associate { it.value.text to it.index }
         val dbTextColumn = headers["db:text"]
         assertNotNull(dbTextColumn)
-        val rows = driver.findElements(By.xpath("//*[@name='xes-data-table']//tbody/tr"))
+        val rows = driver.findElements(By.xpath("(//*[@name='xes-data-table'])[2]//tbody/tr"))
             .filter { it.findElements(By.tagName("td")).size >= 2 }
         assertEquals(12, rows.size)
         val log = ArrayList<ArrayList<String>>()
diff --git a/processm.services/src/main/kotlin/processm/services/logic/LogsService.kt b/processm.services/src/main/kotlin/processm/services/logic/LogsService.kt
@@ -194,8 +194,7 @@ class LogsService(private val producer: Producer) {
         limitFactor: Long = 1L,
     ): DBHierarchicalXESInputStream {
         loggedScope { logger ->
-            logger.info("Querying data store: $dataStoreId")
-            logger.debug("User query: $query")
+            logger.info("Querying data store $dataStoreId using user query $query")
 
             val q = Query(query)
             q.applyLimits(logLimit, traceLimit * limitFactor, eventLimit * limitFactor)
diff --git a/processm.webui/src/main/frontend-app/package-lock.json b/processm.webui/src/main/frontend-app/package-lock.json
diff --git a/processm.webui/src/main/frontend-app/package.json b/processm.webui/src/main/frontend-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ProcessM",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/processm.webui/src/main/frontend-app/src/locales/en-US.json b/processm.webui/src/main/frontend-app/src/locales/en-US.json
@@ -7,7 +7,7 @@
     "workspaces": "Workspaces",
     "users": "@:users.page-title",
     "data-stores": "@:data-stores.page-title",
-    "pql-interpreter": "PQL interpreter",
+    "pql-interpreter": "@:pql-interpreter.page-title",
     "about": "@:about.page-title"
   },
   "topbar": {
@@ -516,5 +516,21 @@
         }
       ]
     }
+  },
+  "pql-interpreter": {
+    "page-title": "PQL interpreter",
+    "page-hint": "This view is intended for prototyping and testing PQL queries. Event logs from all data stores accessible by the current user are available. You can upload your own XES event log below. Raw *.xes files and compressed *.xes.gz files are supported. Type a PQL query below and click [Execute] to see the query results or [Download XES] to download the resulting XES files. Use the drop-down list for predefined queries. Use the [PQL Documentation] button to open the PQL documentation.",
+    "demo-mode": "DO NOT upload event logs containing personal, sensitive, and/or classified information. The uploaded event logs will be stored in the system for an undefined period of time, e.g., until scheduled clean-up or system update. It will be also shared with the other users of this system. The uploaded files will be public available. The system operator is not responsible for the content made public in this way.",
+    "upload-xes-file": {
+      "title": "@:data-stores.upload-xes-file.title"
+    },
+    "pql-documentation": "PQL documentation",
+    "pql-documentation-hint": "@:workspace.component.edit.query-doc",
+    "logs": "Event logs in the selected data store",
+    "select-query": "Select query",
+    "query": "@:workspace.component.edit.query",
+    "query-hint": "The query executed against the selected data store for the retrieval of event logs",
+    "execute": "Execute",
+    "download": "Download XES"
   }
 }
diff --git a/processm.webui/src/main/frontend-app/src/locales/pl-PL.json b/processm.webui/src/main/frontend-app/src/locales/pl-PL.json
@@ -21,7 +21,7 @@
   "kpi-dialog": {
     "title": "Kluczowe wskaźniki efektywności (KPI)",
     "model-kpi": "KPI bazujące na modelu",
-    "log-kpi":"@:workspace.component.aligner-kpi",
+    "log-kpi": "@:workspace.component.aligner-kpi",
     "kpi": "KPI",
     "value": "Wartość",
     "log-count": "Liczba logów"
@@ -516,5 +516,21 @@
         }
       ]
     }
+  },
+  "pql-interpreter": {
+    "page-title": "Interpreter PQL",
+    "page-hint": "Ten widok jest przeznaczony do prototypowania i testowania zapytań PQL. Dzienniki zdarzeń ze wszystkich magazynów danych dostępnych dla bieżącego użytkownika są dostępne. Możesz przesłać swój własny dziennik zdarzeń XES poniżej. Obsługiwane są pliki *.xes oraz skompresowane pliki *.xes.gz. Wpisz zapytanie PQL poniżej i kliknij [Wykonaj], aby zobaczyć wyniki zapytania lub [Pobierz XES], aby pobrać wynikowe pliki XES. Użyj listy rozwijanej, aby wybrać wstępnie zdefiniowane zapytania. Użyj przycisku [Dokumentacja PQL], aby otworzyć dokumentację PQL.",
+    "demo-mode": "NIE przesyłaj dzienników zdarzeń zawierających dane osobowe, wrażliwe i/lub poufne informacje. Przesłane dzienniki zdarzeń będą przechowywane w systemie przez nieokreślony czas, np. do zaplanowanego czyszczenia lub aktualizacji systemu. Będą również udostępniane innym użytkownikom tego systemu. Przesłane pliki będą publicznie dostępne. Operator systemu nie ponosi odpowiedzialności za treści udostępnione w ten sposób.",
+    "upload-xes-file": {
+      "title": "@:data-stores.upload-xes-file.title"
+    },
+    "pql-documentation": "Dokumentacja PQL",
+    "pql-documentation-hint": "@:workspace.component.edit.query-doc",
+    "logs": "Dzienniki zdarzeń w wybranym magazynie danych",
+    "select-query": "Wybierz zapytanie",
+    "query": "@:workspace.component.edit.query",
+    "query-hint": "Zapytanie wykonane na wybranym magazynie danych w celu pobrania dzienników zdarzeń",
+    "execute": "Wykonaj",
+    "download": "Pobierz XES"
   }
 }
diff --git a/processm.webui/src/main/frontend-app/src/views/DataStoreConfiguration.vue b/processm.webui/src/main/frontend-app/src/views/DataStoreConfiguration.vue
@@ -568,11 +568,9 @@ export default class DataStoreConfiguration extends Vue {
         const { headers, logItems } = this.xesProcessor.extractLogItemsFromLogScope(queryResults);
         this.xesLogHeaders = headers;
 
-        for (const item of logItems) {
-          await waitForRepaint(() => {
-            this.xesLogItems.push(item);
-          });
-        }
+        await waitForRepaint(() => {
+          this.xesLogItems.push(...logItems);
+        });
       });
     } catch (err) {
       this.app.error(err?.response?.data?.error ?? err);
@@ -790,4 +788,4 @@ export default class DataStoreConfiguration extends Vue {
     return false;
   }
 }
-</script>
+</script>
diff --git a/processm.webui/src/main/frontend-app/src/views/PQL.vue b/processm.webui/src/main/frontend-app/src/views/PQL.vue
@@ -1,39 +1,57 @@
-/* eslint-disable prettier/prettier */
 <template>
   <v-container>
     <v-row no-gutters>
-      <v-alert type="info" text>
-        The system comes preloaded with several demonstrative event logs. You can upload your own XES event log below. Raw *.xes files and the compressed
-        *.xes.gz files are supported.
-      </v-alert>
-      <v-alert type="warning">
-        DO NOT upload event logs containing personal, sensitive, and/or classified information. The uploaded event logs will be stored in the system for an
-        undefined period of time, e.g., until scheduled clean-up or system update. It will be also shared with the other users of this system. The uploaded
-        files will be public available. The system operator is not responsible for the content made public in this way.
-      </v-alert>
+      <v-alert text type="info">{{ $t("pql-interpreter.page-hint") }}</v-alert>
+      <v-alert v-if="app.config.demoMode" type="warning">{{ $t("pql-interpreter.demo-mode") }}</v-alert>
       <v-col align="left">
         <v-select v-model="dataStoreId" :items="availableDataStores" dense item-text="name" item-value="id" label="Select data store"></v-select>
       </v-col>
       <v-col align="right">
         <v-btn class="mx-2" color="primary" @click="fileUploadDialog = true">
-          Upload XES file
-          <v-icon right>upload_file</v-icon>
+          <v-icon>upload_file</v-icon>
+          {{ $t("pql-interpreter.upload-xes-file.title") }}
           <v-progress-circular v-show="isUploading" :size="20" :width="3" class="ml-2" color="secondary" indeterminate></v-progress-circular>
         </v-btn>
-        <v-btn :to="{ name: 'pql-docs' }" class="mx-2" color="primary" target="_blank"> Documentation</v-btn>
+        <v-btn :title="$t('pql-interpreter.pql-documentation-hint')" :to="{ name: 'pql-docs' }" class="mx-2" color="primary" target="_blank">
+          <v-icon>description</v-icon>
+          {{ $t("pql-interpreter.pql-documentation") }}
+        </v-btn>
       </v-col>
     </v-row>
     <v-row>
       <v-col>
-        <v-alert type="info" text>
-          Type PQL query below and click [Execute] to see query results or [Download XES] to download the resulting XES files. Use the drop-down list for
-          predefined queries. Use the [Documentation] button to open the PQL documentation.
-        </v-alert>
+        <p class="text-subtitle-1">{{ $t("pql-interpreter.logs") }}</p>
+        <div class="text-center">
+          <v-progress-circular v-show="isLoadingXesLogs" color="primary" indeterminate></v-progress-circular>
+        </div>
+        <xes-data-table
+          v-show="!isLoadingXesLogs"
+          :disable-hierarchy="true"
+          :disable-pagination="false"
+          :empty-text="$t('common.no-data')"
+          :headers="xesLogHeaders"
+          :is-expanded="false"
+          :is-fold="false"
+          :items="xesLogItems"
+          :items-per-page="5"
+          :items-per-page-options="[1, 5, -1]"
+          :keep-tree-expand="false"
+          :loading="isLoadingXesLogs"
+          :removable="false"
+          :selectable="true"
+          children-prop="_children"
+        />
       </v-col>
     </v-row>
     <v-row>
       <v-col>
-        <v-select v-model="selectedQuery" :items="predefinedQueries" dense label="Select query" @change="(selectedQuery) => (query = selectedQuery)"></v-select>
+        <v-select
+          v-model="selectedQuery"
+          :items="predefinedQueries"
+          :label="$t('pql-interpreter.select-query')"
+          dense
+          @change="(selectedQuery) => (query = selectedQuery)"
+        ></v-select>
       </v-col>
     </v-row>
     <v-row no-gutters>
@@ -44,7 +62,8 @@
           rows="4"
           background-color="grey lighten-4"
           class="pql-code"
-          label="Query"
+          :hint="$t('pql-interpreter.query-hint')"
+          :label="$t('pql-interpreter.query')"
           v-model="query"
           @input="queryModified"
           name="query"
@@ -55,21 +74,17 @@
     <v-row no-gutters>
       <v-col>
         <v-btn :disabled="isLoadingData" class="mr-4" color="primary" name="btn-submit-query" @click="submitQuery">
-          Execute
+          {{ $t("pql-interpreter.execute") }}
           <v-progress-circular v-show="isLoadingData" :size="20" :width="3" class="ml-2" color="secondary" indeterminate></v-progress-circular>
         </v-btn>
         <v-btn color="primary" @click="download">
-          Download XES
+          {{ $t("pql-interpreter.download") }}
           <v-progress-circular v-show="isDownloading" :size="20" :width="3" class="ml-2" color="secondary" indeterminate></v-progress-circular>
         </v-btn>
       </v-col>
     </v-row>
     <v-row>
       <v-col>
-        <v-alert type="info" text>
-          This view shows at most 10 logs, 30 traces per log, and 90 events per trace. For downloading the limits for the numbers of traces and events are 10
-          times larger.
-        </v-alert>
         <xes-data-table
           :items="items"
           :headers="headers"
@@ -79,6 +94,7 @@
           :keep-tree-expand="false"
           :empty-text="$t('common.no-data')"
           :disable-pagination="false"
+          :items-per-page="5"
           :items-per-page-options="[1, 5, -1]"
           :selectable="false"
           children-prop="_children"
@@ -111,7 +127,7 @@
 <script lang="ts">
 import Vue from "vue";
 import { waitForRepaint } from "@/utils/waitForRepaint";
-import { Component, Inject } from "vue-property-decorator";
+import { Component, Inject, Watch } from "vue-property-decorator";
 import LogsService from "@/services/LogsService";
 import DataStoreService from "@/services/DataStoreService";
 import XesProcessor, { LogItem } from "@/utils/XesProcessor";
@@ -136,12 +152,18 @@ export default class PQL extends Vue {
   isUploading = false;
   isDownloading = false;
   isLoadingDataStores = false;
+
+  xesLogHeaders: string[] = [];
+  xesLogItems: LogItem[] = [];
+  isLoadingXesLogs = false;
+  readonly getLogsQuery = "select log:concept:name, log:identity:id, log:lifecycle:model";
+
   query = "";
   headers = new Array<string>();
   items = new Array<LogItem>();
   selectedQuery = "";
   fileUploadDialog = false;
-  predefinedQueries = [
+  readonly predefinedQueries = [
     { text: "Custom", value: "" },
     { text: "UC1: Read the entire database", value: "select *" },
     {
@@ -241,6 +263,7 @@ export default class PQL extends Vue {
       this.app.error(err);
     } finally {
       this.isUploading = false;
+      await this.loadXesLogs();
     }
   }
 
@@ -265,11 +288,9 @@ export default class PQL extends Vue {
         const { headers, logItems } = this.xesProcessor.extractHierarchicalLogItemsFromAllScopes(queryResults);
         this.headers = headers;
 
-        for (const item of logItems) {
-          await waitForRepaint(() => {
-            this.items.push(item);
-          });
-        }
+        await waitForRepaint(() => {
+          this.items.push(...logItems);
+        });
 
         const formattingTime = new Date().getTime() - start;
         this.app.info("Query executed and results retrieved in " + executionTime + "ms. Formatted results in " + formattingTime + "ms.");
@@ -298,5 +319,33 @@ export default class PQL extends Vue {
       this.isDownloading = false;
     }
   }
+
+  /**
+   * Loads the list of event logs.
+   */
+  @Watch("dataStoreId")
+  async loadXesLogs() {
+    if (this.dataStoreId == null) return;
+    try {
+      this.isLoadingXesLogs = true;
+      this.xesLogHeaders = [];
+      this.xesLogItems = [];
+
+      const queryResults = await this.logsService.submitUserQuery(this.dataStoreId, this.getLogsQuery, "application/json", false, false);
+
+      await waitForRepaint(async () => {
+        const { headers, logItems } = this.xesProcessor.extractLogItemsFromLogScope(queryResults);
+        this.xesLogHeaders = headers;
+
+        await waitForRepaint(() => {
+          this.xesLogItems.push(...logItems);
+        });
+      });
+    } catch (err) {
+      this.app.error(err?.response?.data?.error ?? err);
+    } finally {
+      this.isLoadingXesLogs = false;
+    }
+  }
 }
 </script>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ProcessM",`
`3`		`- "version": "0.7.1",`
	`3`	`+ "version": "0.7.2",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"serve": "vue-cli-service serve",`