From 8adfe426aa352767dddd147796bc284d363552f0 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Wed, 16 Jul 2025 21:04:14 +0200 Subject: [PATCH 01/34] Various improvements to the query console --- .../querying/console/console.component.html | 162 +++++++++--------- .../querying/console/console.component.scss | 10 +- .../querying/console/console.component.ts | 149 +++++----------- .../querying/console/query-history.model.ts | 13 +- 4 files changed, 136 insertions(+), 198 deletions(-) diff --git a/src/app/views/querying/console/console.component.html b/src/app/views/querying/console/console.component.html index cdb3e809..d494469f 100644 --- a/src/app/views/querying/console/console.component.html +++ b/src/app/views/querying/console/console.component.html @@ -1,44 +1,75 @@ - - -
-
- Namespace: {{activeNamespace()}} -
- Namespace: - + [ngValue]="namespace.name">{{ namespace.name }} +
-
- - -
-
+ [ngClass]="usesAdvancedConsole() ? 'advanced-console': 'simple-console'">
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + - +
  • -
    History
    +
    + History + +
    @@ -79,71 +112,38 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Click on a query to view its result and additional information.
+ container="body" *ngIf="someExpanded()" + placement="top" delay="500">
- + - {{result.query}} - - {{result.affectedTuples}} - ! - + {{ result.query }} +
+ + {{ result.affectedTuples }} + ! + +
-
Error: diff --git a/src/app/views/querying/console/console.component.scss b/src/app/views/querying/console/console.component.scss index 57d7af54..edd5a705 100644 --- a/src/app/views/querying/console/console.component.scss +++ b/src/app/views/querying/console/console.component.scss @@ -119,7 +119,7 @@ select { #results .card-header:hover span { overflow: auto; max-height: 6em; - transition: max-height 0.5s; + transition: max-height 0.2s; transition-delay: 0.5s; } @@ -137,7 +137,7 @@ select { .del-hist-item { position: absolute; - right: 1em; + left: 1em; top: 50%; margin-top: -1em; display: none; @@ -170,10 +170,6 @@ select { margin-right: 0.5em; } -.document-db-info { - text-align: right; -} - .advanced-console-db-info { display: inline-block; @@ -194,7 +190,7 @@ select { } .advanced-console { - height: 185.617px; + height: calc(240px - 66px); margin: 1px; } diff --git a/src/app/views/querying/console/console.component.ts b/src/app/views/querying/console/console.component.ts index d838a3aa..5d3ea77a 100644 --- a/src/app/views/querying/console/console.component.ts +++ b/src/app/views/querying/console/console.component.ts @@ -1,14 +1,4 @@ -import { - Component, - effect, - inject, - OnDestroy, - OnInit, - signal, - untracked, - ViewChild, - WritableSignal -} from '@angular/core'; +import {Component, computed, inject, OnDestroy, OnInit, Signal, signal, ViewChild, WritableSignal} from '@angular/core'; import {EntityConfig} from '../../../components/data-view/data-table/entity-config'; import {CrudService} from '../../../services/crud.service'; import {RelationalResult, Result} from '../../../components/data-view/models/result-set.model'; @@ -54,7 +44,7 @@ export class ConsoleComponent implements OnInit, OnDestroy { private readonly LOCAL_STORAGE_NAMESPACE_KEY = 'polypheny-namespace'; results: WritableSignal[]> = signal([]); - collapsed: boolean[]; + collapsed: WritableSignal = signal([]); queryAnalysis: InformationPage; analyzeQuery = true; useCache = true; @@ -69,8 +59,11 @@ export class ConsoleComponent implements OnInit, OnDestroy { historySearchQuery = ''; confirmDeletingHistory; readonly activeNamespace: WritableSignal = signal(null); - readonly namespaces: WritableSignal = signal([]); - delayedNamespace: string = null + readonly namespaces: Signal = computed(() => Array.from(this._catalog.namespaces().values())); + readonly usesAdvancedConsole: Signal = computed(() => this.language() === 'mql' || this.language() === 'cypher'); + readonly someExpanded: Signal = computed(() => this.collapsed().some(v => v)); + readonly someCollapsed: Signal = computed(() => this.collapsed().some(v => !v)); + delayedNamespace: string = null; entityConfig: EntityConfig = { create: false, @@ -80,7 +73,6 @@ export class ConsoleComponent implements OnInit, OnDestroy { search: false, exploring: false }; - showNamespaceConfig: boolean; constructor() { this.websocket = new WebSocket(); @@ -94,22 +86,6 @@ export class ConsoleComponent implements OnInit, OnDestroy { } this.initWebsocket(); - - effect(() => { - const namespace = this._catalog.namespaces(); - untracked(() => { - this.namespaces.set(Array.from(namespace.values())); - }); - }); - - effect(() => { - const res = this.results(); - - untracked(() => { - this.collapsed = new Array(res.length); - this.collapsed.fill(false); - }) - }); } @@ -123,12 +99,9 @@ export class ConsoleComponent implements OnInit, OnDestroy { private loadAndSetNamespaceDB() { let namespaceName = localStorage.getItem(this.LOCAL_STORAGE_NAMESPACE_KEY); - if (namespaceName === null || (this.namespaces && this.namespaces.length > 0 && (this.namespaces().filter(n => n.name === namespaceName).length === 0))) { - if (this.namespaces() && this.namespaces().length > 0) { - namespaceName = this.namespaces()[0].name; - } else { - namespaceName = 'public'; - } + const hasNamespaces = this.namespaces() && this.namespaces().length > 0; + if (namespaceName === null || (hasNamespaces && !this.namespaces().some(n => n.name === namespaceName))) { + namespaceName = hasNamespaces ? this.namespaces()[0].name : 'public'; } if (!namespaceName) { return; @@ -156,18 +129,18 @@ export class ConsoleComponent implements OnInit, OnDestroy { return; } if (this.saveInHistory) { - this.addToHistory(code, this.language()); + this.addToHistory(code, this.language(), this.activeNamespace()); } - if (this.usesAdvancedConsole(this.language())) { - code.split(";").forEach((query: string) => { + if (this.usesAdvancedConsole()) { + code.split(';').forEach((query: string) => { // maybe adjust - const graphUse = /use *graph *([a-zA-Z][a-zA-Z0-9-_]*)/gmi + const graphUse = /use *graph *([a-zA-Z][a-zA-Z0-9-_]*)/gmi; const matchGraph = graphUse.exec(query.trim()); if (matchGraph !== null && matchGraph.length > 1) { this.delayedNamespace = matchGraph[1]; } - const useRegex = /use ([a-zA-Z][a-zA-Z0-9-_]*)/gmi + const useRegex = /use ([a-zA-Z][a-zA-Z0-9-_]*)/gmi; const match = useRegex.exec(query.trim()); if (match !== null && match.length > 1) { const namespace = match[1]; @@ -175,7 +148,7 @@ export class ConsoleComponent implements OnInit, OnDestroy { this.delayedNamespace = namespace; } } - }) + }); if (code.match('show db')) { @@ -199,14 +172,15 @@ export class ConsoleComponent implements OnInit, OnDestroy { if (!this._crud.anyQuery(this.websocket, new QueryRequest(code, this.analyzeQuery, this.useCache, this.language(), this.activeNamespace()))) { this.loading.set(false); this.results.set([new RelationalResult('Could not establish a connection with the server.')]); + this.resetCollapsed(); } } collapseAll(collapse: boolean) { - this.collapsed.fill(collapse); + this.collapsed.update(v => v.map(() => collapse)); } - addToHistory(query: string, lang: string): void { + addToHistory(query: string, lang: string, namespace: string): void { if (this.history.size >= this.MAX_HISTORY) { let h: QueryHistory = new QueryHistory(''); this.history.forEach((val, key) => { @@ -216,21 +190,24 @@ export class ConsoleComponent implements OnInit, OnDestroy { }); this.history.delete(h.query); } - const newHistory = new QueryHistory(query, null, lang); + const newHistory = new QueryHistory(query, null, lang, namespace); this.history.set(newHistory.query, newHistory); localStorage.setItem(this.LOCAL_STORAGE_HISTORY_KEY, JSON.stringify(Array.from(this.history.values()))); } - applyHistory(query: string, lang: string, run: boolean) { + applyHistory(query: string, lang: string, namespace: string, run: boolean) { this.language.set(lang); this.codeEditor.setCode(query); + if (namespace) { + this.activeNamespace.set(namespace); + } if (run) { this.submitQuery(); } } - deleteHistoryItem(key, e) { + deleteHistoryItem(key: string, e: MouseEvent) { if (this.confirmDeletingHistory === key) { this.history.delete(key); localStorage.setItem(this.LOCAL_STORAGE_HISTORY_KEY, JSON.stringify(Array.from(this.history.values()))); @@ -323,12 +300,13 @@ export class ConsoleComponent implements OnInit, OnDestroy { } else if (Array.isArray(msg) && ((msg[0].hasOwnProperty('data') || msg[0].hasOwnProperty('affectedTuples') || msg[0].hasOwnProperty('error')))) { // array of ResultSets if (this.delayedNamespace && !msg[0].hasOwnProperty('error')) { this.activeNamespace.set(this.delayedNamespace); - this.storeNamespace(this.delayedNamespace) + this.storeNamespace(this.delayedNamespace); } this.delayedNamespace = null; this.loading.set(false); this.results.set([]>msg); + this.resetCollapsed(); } else if (msg.hasOwnProperty('type')) { //if msg contains a notification of a changed information object const iObj = msg; @@ -359,60 +337,24 @@ export class ConsoleComponent implements OnInit, OnDestroy { this.submitQuery(); } - formatQuery() { - let code = this.codeEditor.getCode(); - if (!code) { - return; - } - let before = ''; - const after = ')'; - - // here we replace the Json incompatible types with placeholders - const temp = code.match(/NumberDecimal\([^)]*\)/g); - - if (temp !== null) { - for (let i = 0; i < temp.length; i++) { - code = code.replace(temp[i], '"___' + i + '"'); - } - } - - - const splits = code.split('('); - before = splits.shift() + '('; - - try { - let json = this.parse(splits.join('(').slice(0, -1)); - // we have to translate them back - if (temp !== null) { - for (let i = 0; i < temp.length; i++) { - json = json.replace('"___' + i + '"', temp[i]); - } - } - - this.codeEditor.setCode(before + json + after); - } catch (e) { - this._toast.warn(e); - } - } - - parse(code: string) { - const formatted = JSON.stringify(JSON.parse('[' + code + ']'), null, 4); - return formatted.substring(1, formatted.length - 1); - } - private storeNamespace(name: string) { localStorage.setItem(this.LOCAL_STORAGE_NAMESPACE_KEY, name); } - toggleCollapsed(i: number) { - console.log(i) - if (this.collapsed !== undefined && this.collapsed[i] !== undefined) { - this.collapsed[i] = !this.collapsed[i]; - } + private resetCollapsed() { + const collapsed = new Array(this.results().length); + collapsed.fill(false); + this.collapsed.set(collapsed); } - clearConsole() { - this.codeEditor.setCode(''); + toggleCollapsed(i: number) { + this.collapsed.update(v => { + const collapsed = [...v]; + if (collapsed[i] !== undefined) { + collapsed[i] = !collapsed[i]; + } + return collapsed; + }); } toggleCache(b: boolean) { @@ -428,14 +370,6 @@ export class ConsoleComponent implements OnInit, OnDestroy { this.originalCache = null; } - usesAdvancedConsole(lang: string) { - return lang === 'mql' || lang === 'cypher'; - } - - toggleNamespaceField() { - this.showNamespaceConfig = !this.showNamespaceConfig; - } - changedDefaultDB(n) { this.activeNamespace.set(n); } @@ -443,4 +377,9 @@ export class ConsoleComponent implements OnInit, OnDestroy { setLanguage(language) { this.language.set(language); } + + clearHistory() { + this.history.clear(); + localStorage.setItem(this.LOCAL_STORAGE_HISTORY_KEY, JSON.stringify(Array.from(this.history.values()))); + } } diff --git a/src/app/views/querying/console/query-history.model.ts b/src/app/views/querying/console/query-history.model.ts index 2a708fb0..d6936306 100644 --- a/src/app/views/querying/console/query-history.model.ts +++ b/src/app/views/querying/console/query-history.model.ts @@ -2,13 +2,16 @@ import * as moment from 'moment'; export class QueryHistory { - query: string; - time: Date; - lang: string; + readonly query: string; + readonly time: Date; + readonly lang: string; + readonly namespace: string; - constructor(query: string, time = null, lang = 'sql') { + + constructor(query: string, time = null, lang = 'sql', namespace = 'public') { this.query = query; this.lang = lang; + this.namespace = namespace; if (time === null) { this.time = new Date(); } else { @@ -24,7 +27,7 @@ export class QueryHistory { for (const key in obj) { if (obj.hasOwnProperty(key)) { - map.set(obj[key].query, new QueryHistory(obj[key].query, obj[key].time, obj[key].lang)); + map.set(obj[key].query, new QueryHistory(obj[key].query, obj[key].time, obj[key].lang, obj[key].namespace)); } } } From 887afff2b2fa882dcbfbeeabf490ac5fd6f41e83 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Thu, 17 Jul 2025 15:56:22 +0200 Subject: [PATCH 02/34] Improve look and feel of query history --- .../delete-confirm/delete-confirm.component.html | 4 ++-- .../delete-confirm/delete-confirm.component.scss | 3 +++ .../views/querying/console/console.component.html | 15 +++++---------- .../views/querying/console/console.component.scss | 5 ----- .../views/querying/console/console.component.ts | 13 ++++--------- 5 files changed, 14 insertions(+), 26 deletions(-) diff --git a/src/app/components/delete-confirm/delete-confirm.component.html b/src/app/components/delete-confirm/delete-confirm.component.html index e02e5c99..e4c03fe2 100644 --- a/src/app/components/delete-confirm/delete-confirm.component.html +++ b/src/app/components/delete-confirm/delete-confirm.component.html @@ -1,4 +1,4 @@ - diff --git a/src/app/components/delete-confirm/delete-confirm.component.scss b/src/app/components/delete-confirm/delete-confirm.component.scss index 83d078d0..4ed4638b 100644 --- a/src/app/components/delete-confirm/delete-confirm.component.scss +++ b/src/app/components/delete-confirm/delete-confirm.component.scss @@ -2,3 +2,6 @@ cursor: pointer; } +.hover-grow:hover { + transform: scale(1.2); +} diff --git a/src/app/views/querying/console/console.component.html b/src/app/views/querying/console/console.component.html index d494469f..9ecd5d17 100644 --- a/src/app/views/querying/console/console.component.html +++ b/src/app/views/querying/console/console.component.html @@ -6,7 +6,7 @@
+ class="list-group-item header grey-bg px-3 border-bottom">
Namespace: + '{{ activeNamespace() }}' does not exist.
(empty) -
  • @@ -99,16 +100,10 @@ {{ h.value.displayTime() }} {{ h.value.fromNow() }}
    • -
    +
    {{ _util.limitedString( h.value.query ) }}
    - - - - + diff --git a/src/app/views/querying/console/console.component.scss b/src/app/views/querying/console/console.component.scss index edd5a705..a68e05ae 100644 --- a/src/app/views/querying/console/console.component.scss +++ b/src/app/views/querying/console/console.component.scss @@ -136,10 +136,6 @@ select { } .del-hist-item { - position: absolute; - left: 1em; - top: 50%; - margin-top: -1em; display: none; } @@ -182,7 +178,6 @@ select { .grey-bg { background-color: #f0f3f5; border: none; - border-bottom: 1px white solid; } .grey-border { diff --git a/src/app/views/querying/console/console.component.ts b/src/app/views/querying/console/console.component.ts index 5d3ea77a..8cd5c44b 100644 --- a/src/app/views/querying/console/console.component.ts +++ b/src/app/views/querying/console/console.component.ts @@ -57,9 +57,9 @@ export class ConsoleComponent implements OnInit, OnDestroy { saveInHistory = true; showSearch = false; historySearchQuery = ''; - confirmDeletingHistory; readonly activeNamespace: WritableSignal = signal(null); readonly namespaces: Signal = computed(() => Array.from(this._catalog.namespaces().values())); + readonly activeNamespaceExists: Signal = computed(() => this.namespaces().some(v => v.name === this.activeNamespace())); readonly usesAdvancedConsole: Signal = computed(() => this.language() === 'mql' || this.language() === 'cypher'); readonly someExpanded: Signal = computed(() => this.collapsed().some(v => v)); readonly someCollapsed: Signal = computed(() => this.collapsed().some(v => !v)); @@ -207,14 +207,9 @@ export class ConsoleComponent implements OnInit, OnDestroy { } } - deleteHistoryItem(key: string, e: MouseEvent) { - if (this.confirmDeletingHistory === key) { - this.history.delete(key); - localStorage.setItem(this.LOCAL_STORAGE_HISTORY_KEY, JSON.stringify(Array.from(this.history.values()))); - } else { - this.confirmDeletingHistory = key; - } - e.stopPropagation(); + deleteHistoryItem(key: string) { + this.history.delete(key); + localStorage.setItem(this.LOCAL_STORAGE_HISTORY_KEY, JSON.stringify(Array.from(this.history.values()))); } //from: https://stackoverflow.com/questions/52793944/angular-keyvalue-pipe-sort-properties-iterate-in-order From baf65a6e00cbf9edd72aa64a546ce19a207d2ce0 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Thu, 17 Jul 2025 16:54:25 +0200 Subject: [PATCH 03/34] Remove unnecessary nested c-containers from views --- .../breadcrumb/breadcrumb.component.html | 64 ++-- .../information-manager.component.html | 4 +- .../edit-notebook.component.html | 4 +- .../edit-notebook.component.scss | 4 +- .../views/dashboard/dashboard.component.html | 322 +++++++++--------- .../form-generator.component.html | 16 +- src/app/views/login/login.component.html | 152 ++++----- .../querying/console/console.component.html | 318 +++++++++-------- .../querying/polyalg/polyalg.component.html | 8 +- .../schema-editing.component.html | 8 +- .../table-view/table-view.component.html | 4 +- 11 files changed, 448 insertions(+), 456 deletions(-) diff --git a/src/app/components/breadcrumb/breadcrumb.component.html b/src/app/components/breadcrumb/breadcrumb.component.html index 1d882920..ffd67f3a 100644 --- a/src/app/components/breadcrumb/breadcrumb.component.html +++ b/src/app/components/breadcrumb/breadcrumb.component.html @@ -1,40 +1,38 @@
    - - + - - -
  • - - {{ b.name }} - - {{ b.name }} -
    • -     -     - + + +
  • + + {{ b.name }} + + {{ b.name }} +
    • +     +     + - - -
    diff --git a/src/app/components/information-manager/information-manager.component.html b/src/app/components/information-manager/information-manager.component.html index df863c4f..a2248306 100644 --- a/src/app/components/information-manager/information-manager.component.html +++ b/src/app/components/information-manager/information-manager.component.html @@ -1,4 +1,4 @@ - +

    {{ $data().name }}

    @@ -28,4 +28,4 @@

    {{ $data().name }}

         - +
    diff --git a/src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.html b/src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.html index e2aae92f..07f7199e 100644 --- a/src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.html +++ b/src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.html @@ -1,4 +1,4 @@ - +
    @@ -166,7 +166,7 @@ - +

    {{name}}

    diff --git a/src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.scss b/src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.scss index 26939731..2f24aeb6 100644 --- a/src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.scss +++ b/src/app/plugins/notebooks/components/edit-notebook/edit-notebook.component.scss @@ -5,9 +5,9 @@ margin-left: -30px; margin-right: -30px; border-bottom: 1px solid #c8ced3; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 5px -4px rgba(0, 0, 0, 0.2); position: relative; - z-index: 5; // make shadow appear above editor + z-index: 2; // make shadow appear above editor } .nb-scroll { diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html index 34e576eb..db4d2dac 100644 --- a/src/app/views/dashboard/dashboard.component.html +++ b/src/app/views/dashboard/dashboard.component.html @@ -1,168 +1,166 @@ - - - - - -
    -
    Workload
    - - - - - + + + + +
    +
    Workload
    + + + + + +
    +     + +
    + +
    + +
    +

    There is not yet enough information to display the workload graph.

    +
    + + +
    + - - -
    - +
    + +     + + + + + + General Information + + + +
    +
    Adapter Information
    + + + + + + + + + + + + + + + + + + + +
    NameAdapterType
    {{ obj.key }}{{ obj.value.left | titlecase }}{{ obj.value.right | titlecase }}
    + +
    Schema Information
    + + + + + + + + + + + + + + + + + +
    NameData Model
    {{ obj.key }}{{ obj.value | titlecase }}
    + + +
    + +
    +

    There is not yet enough information to display the adapter information.

    +
    + + +
    + - -
    -

    There is not yet enough information to display the workload graph.

    -
    - - -
    - -
    - - - - - - - - General Information - - - -
    -
    Adapter Information
    - - - - - - - - - - - - - - - - - - - -
    NameAdapterType
    {{obj.key}}{{ obj.value.left | titlecase }}{{ obj.value.right | titlecase }}
    - -
    Schema Information
    - - - - - - - - - - - - - - - - - -
    NameData Model
    {{ obj.key }}{{ obj.value | titlecase }}
    - - -
    - -
    -

    There is not yet enough information to display the adapter information.

    -
    - - -
    - -
    - -     -     -     - - - - Workload Information - - - -
    - - - - - - - - - - - - - - - - - - - - -
    CommitsRollbacksDMLsDQLs
    {{this.dashboardSet.numberOfCommits}}{{this.dashboardSet.numberOfRollbacks}}{{this.dashboardSet.numberOfWorkloads}}{{this.dashboardSet.numberOfQueries}}
    -
    - -
    -

    There is not yet enough information to display the workload information.

    -
    - -
    - +
    + +     +     +     + + + + Workload Information + + + +
    + + + + + + + + + + + + + + + + + + + + +
    CommitsRollbacksDMLsDQLs
    {{ this.dashboardSet.numberOfCommits }}{{ this.dashboardSet.numberOfRollbacks }}{{ this.dashboardSet.numberOfWorkloads }}{{ this.dashboardSet.numberOfQueries }}
    +
    + +
    +

    There is not yet enough information to display the workload information.

    +
    + +
    + - - - - - +
    +     +     +     + diff --git a/src/app/views/forms/form-generator/form-generator.component.html b/src/app/views/forms/form-generator/form-generator.component.html index 5e609a9b..9ed24e5d 100644 --- a/src/app/views/forms/form-generator/form-generator.component.html +++ b/src/app/views/forms/form-generator/form-generator.component.html @@ -1,6 +1,6 @@ - +
    @@ -226,12 +226,12 @@

    {{ formObj.title }}
    - +
    - +

    Page with id "{{ pageId }}" does not exist or could not be loaded.

    -     - + + Choose a page to display configs:

    @@ -240,12 +240,12 @@

    {{ formObj.title }}

         -     - + +

    Server not responding:
    {{ serverError.name }}: {{ serverError.message }}

    -     + diff --git a/src/app/views/login/login.component.html b/src/app/views/login/login.component.html index 7b39adb7..6927b067 100644 --- a/src/app/views/login/login.component.html +++ b/src/app/views/login/login.component.html @@ -1,94 +1,92 @@
    - - - -
    - - -
    - - -
    - ActionAnother - actionSomething else here -
    + + +
    + + +
    + + +
    + ActionAnother + actionSomething else here +
    -
    -
    - +
    +
    + - favorites
    - - {{f.server}} - :{{f.port}} +     favorites
    + + {{ f.server }} + :{{ f.port }} - save this login -
    history
    - {{h.server}}:{{h.port}} -
    + save this login +
    history
    + {{ h.server }}:{{ h.port }}
    +
    -
    -

    Login

    -

    Connect with Polypheny

    + +

    Login

    +

    Connect with Polypheny

    +
    -
    -
    - -
    - -
    - -
    -
    - -
    - -
    -
    - +
    - +
    -
    +
    - +
    - + +
    + +
    +
    - - - - - - - - - - - -
    - - - + +
    + +
    +
    + +
    + +
    + + + + + + + + + + + +
    + +
    diff --git a/src/app/views/querying/console/console.component.html b/src/app/views/querying/console/console.component.html index 9ecd5d17..bc8a4860 100644 --- a/src/app/views/querying/console/console.component.html +++ b/src/app/views/querying/console/console.component.html @@ -1,173 +1,171 @@ - - - -
    -
    -
    - Namespace: - - '{{ activeNamespace() }}' does not exist. -
    -
    -
    - + + +
    +
    +
    + Namespace: + + '{{ activeNamespace() }}' does not exist.
    +
    + +
    +
    - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - -     - -
      -
    • -
      - History - -
      -
      - - - -
      -
      • -
    -
      -
    • (empty) -
      • -
    • -
      - {{ h.value.lang }} - {{ h.value.displayTime() }} - {{ h.value.fromNow() }} -
      -
      - {{ _util.limitedString( h.value.query ) }} -
      - -
      • -
    -     -     + + + + + + + + + + +
      +
    • +
      + History + +
      +
      + + + +
      +
      • +
    +
      +
    • (empty) +
      • +
    • +
      + {{ h.value.lang }} + {{ h.value.displayTime() }} + {{ h.value.fromNow() }} +
      +
      + {{ _util.limitedString( h.value.query ) }} +
      + +
      • +
    +     + - - - Click on a query to view its result and additional information. -
    - - -
    -     - - - - {{ result.query }} -
    - - {{ result.affectedTuples }} - ! - -
    -     + + + Click on a query to view its result and additional information. +
    + + +
    +     + + + + {{ result.query }} +
    + + {{ result.affectedTuples }} + ! + +
    +     - -
    - Error: -

    {{ result.error }}

    -
    + +
    + Error: +

    {{ result.error }}

    +
    -
    -

    - Successfully executed -

    -
    +
    +

    + Successfully executed +

    +
    - - -

    - Only {{ result.data.length }} rows are being displayed. To fetch more rows, please specify - a LIMIT clause.

    -     -     -     -     -     + + +

    + Only {{ result.data.length }} rows are being displayed. To fetch more rows, please specify + a LIMIT clause.

    +     + +     +     +     - - + diff --git a/src/app/views/querying/polyalg/polyalg.component.html b/src/app/views/querying/polyalg/polyalg.component.html index 08c767ab..8d861d38 100644 --- a/src/app/views/querying/polyalg/polyalg.component.html +++ b/src/app/views/querying/polyalg/polyalg.component.html @@ -1,4 +1,4 @@ - +
    @@ -22,9 +22,9 @@ - +
    - +
    {{ result().query }} @@ -56,7 +56,7 @@ - +
    diff --git a/src/app/views/schema-editing/schema-editing.component.html b/src/app/views/schema-editing/schema-editing.component.html index f91411fe..b1423fd8 100644 --- a/src/app/views/schema-editing/schema-editing.component.html +++ b/src/app/views/schema-editing/schema-editing.component.html @@ -3,7 +3,7 @@
    - +

    Namespaces

    Select an item from the left sidebar to edit its entities.

    @@ -12,7 +12,7 @@

    Namespaces

    - + Create Namespace @@ -56,7 +56,7 @@

    Namespaces

         - + Drop Namespace @@ -87,4 +87,4 @@

    Namespaces

         -     + diff --git a/src/app/views/table-view/table-view.component.html b/src/app/views/table-view/table-view.component.html index d1e982bf..bfc97888 100644 --- a/src/app/views/table-view/table-view.component.html +++ b/src/app/views/table-view/table-view.component.html @@ -1,7 +1,7 @@ - +
    {{ fullName() }}

    - +
    Date: Thu, 17 Jul 2025 17:58:54 +0200 Subject: [PATCH 04/34] Use compact layout for monitoring information objects instead of rows --- .../information-manager.component.html | 56 ++++++++++++------- .../information-manager.component.scss | 14 +++++ .../information-manager.component.ts | 8 +-- .../workflows-dashboard.component.html | 8 +-- .../views/adapters/adapters.component.html | 5 +- .../query-interfaces.component.html | 4 +- 6 files changed, 59 insertions(+), 36 deletions(-) diff --git a/src/app/components/information-manager/information-manager.component.html b/src/app/components/information-manager/information-manager.component.html index a2248306..eadb944f 100644 --- a/src/app/components/information-manager/information-manager.component.html +++ b/src/app/components/information-manager/information-manager.component.html @@ -8,24 +8,40 @@

    {{ $data().name }}

    [action]="refreshPage"> - - - - - - {{item.value.name}} - - - - - - - - - - - + + @if (isFullWidth()) { + + + + + + + + } @else { +
    + +
    + +
    +     +
    +
    + }
    + + + + + {{ item.value.name }} + + + + + + + + + \ No newline at end of file diff --git a/src/app/components/information-manager/information-manager.component.scss b/src/app/components/information-manager/information-manager.component.scss index e3841a2e..76eebbc9 100644 --- a/src/app/components/information-manager/information-manager.component.scss +++ b/src/app/components/information-manager/information-manager.component.scss @@ -51,3 +51,17 @@ .refreshGroup:active { background-color: rgba(0, 0, 0, 0.15) !important; } + +.masonry { + column-count: 2; + column-gap: 1rem; +} + +.masonry-item { + break-inside: avoid; + margin-bottom: 1rem; +} + +.filler-item { + height: 100px; // results in a better distribution of items between columns (favors the left column) +} \ No newline at end of file diff --git a/src/app/components/information-manager/information-manager.component.ts b/src/app/components/information-manager/information-manager.component.ts index b2ddb1ae..b18a0ae0 100644 --- a/src/app/components/information-manager/information-manager.component.ts +++ b/src/app/components/information-manager/information-manager.component.ts @@ -20,13 +20,7 @@ export class InformationManagerComponent implements OnInit { refreshingPage = false; refreshingGroup = []; width = signal(1080); - zoom = computed(() => { - if (this.width() < 1200 || this.$data().fullWidth) { - return 12; - } else { - return 6; - } - }); + isFullWidth = computed(() => this.width() < 1200 || this.$data().fullWidth); @HostListener('window:resize', ['$event']) onResize(event?) { diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html index 2b116f6c..4b69a969 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html @@ -72,8 +72,8 @@

    -
    - +
    + @for (def of group.defs; track def.id) { @@ -197,7 +197,7 @@
    {{ def.def.name }}
    } @case ('sessions') {

    Active Sessions

    -
      +
        @for (session of userSessions; track session.sessionId) { } @@ -313,7 +313,7 @@

        API Sessions

        -
          +
            @for (session of apiSessions; track session.sessionId) { } diff --git a/src/app/views/adapters/adapters.component.html b/src/app/views/adapters/adapters.component.html index c122415e..0621a99b 100644 --- a/src/app/views/adapters/adapters.component.html +++ b/src/app/views/adapters/adapters.component.html @@ -1,4 +1,4 @@ - +
            @@ -118,9 +118,8 @@

            Sources

             -
            -             +
    +
    @@ -79,7 +79,7 @@

    Query Interfaces

     - +
    Date: Fri, 18 Jul 2025 17:30:10 +0200 Subject: [PATCH 05/34] Improvements to UI settings in the right sidebar --- src/app/components/components.module.ts | 4 +- .../right-sidebar.component.html | 50 ++++++++----------- .../right-sidebar/right-sidebar.component.ts | 42 ++++++++++++++-- .../default-layout.component.html | 31 ++++++------ src/app/services/crud.service.ts | 28 +++++++---- src/app/services/webui-settings.service.ts | 24 ++++++--- 6 files changed, 114 insertions(+), 65 deletions(-) diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index 485a994f..e7299c53 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -7,6 +7,7 @@ import { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, + AlertComponent, BadgeComponent, BgColorDirective, BreadcrumbComponent as BreadCrumb, @@ -220,7 +221,8 @@ import {AutocompleteComponent} from './autocomplete/autocomplete.component'; PopoverModule, ButtonToolbarComponent, BadgeComponent, - FormCheckComponent + FormCheckComponent, + AlertComponent ], declarations: [ BreadcrumbComponent, diff --git a/src/app/components/right-sidebar/right-sidebar.component.html b/src/app/components/right-sidebar/right-sidebar.component.html index 0ba3179d..175ff2f2 100644 --- a/src/app/components/right-sidebar/right-sidebar.component.html +++ b/src/app/components/right-sidebar/right-sidebar.component.html @@ -1,32 +1,26 @@ - - - - Host Parameters - - - - - -
    +@if (_crud.connected) { + Latency: {{ this.formattedLatency() }} +} @else { + Disconnected +} + -
    -
    - - -
    -
    +
    +
    + + +
    +
    -
    - saving and resetting will reload the page -
    -
    - - - -
    +
    + Saving or resetting will reload the UI. +
    +
    + + + +
    -
    -     -     + diff --git a/src/app/components/right-sidebar/right-sidebar.component.ts b/src/app/components/right-sidebar/right-sidebar.component.ts index 19d8a294..574471a2 100644 --- a/src/app/components/right-sidebar/right-sidebar.component.ts +++ b/src/app/components/right-sidebar/right-sidebar.component.ts @@ -1,28 +1,46 @@ -import {Component, inject, Input, OnInit} from '@angular/core'; +import {Component, computed, inject, Input, OnDestroy, OnInit, signal, WritableSignal} from '@angular/core'; import {Setting, WebuiSettingsService} from '../../services/webui-settings.service'; import {UntypedFormControl, UntypedFormGroup} from '@angular/forms'; import {RightSidebarToRelationalalgebraService} from '../../services/right-sidebar-to-relationalalgebra.service'; +import {CrudService} from '../../services/crud.service'; +import {round} from 'lodash'; @Component({ selector: 'app-right-sidebar', templateUrl: './right-sidebar.component.html', styleUrls: ['./right-sidebar.component.scss'] }) -export class RightSidebarComponent implements OnInit { +export class RightSidebarComponent implements OnInit, OnDestroy { private readonly _settings = inject(WebuiSettingsService); private readonly _RsToRa = inject(RightSidebarToRelationalalgebraService); + readonly _crud = inject(CrudService); @Input() reload: () => void; - settings: Map = this._settings.getSettings(); + settings: Map = this._settings.getConfigurableSettings(); form: UntypedFormGroup; settingsGR = this._settings.getSettingsGR(); formGR: UntypedFormGroup; public buttonName = 'connect'; + private latency: WritableSignal = signal(null); + formattedLatency = computed(() => `${round(this.latency())} ms`); + latencyColor = computed(() => { + if (this.latency() > 500) { + return 'danger'; + } else if (this.latency() > 150) { + return 'warning'; + } else { + return 'success'; + } + }); + latencyInterval: number; + readonly LATENCY_MEASURE_DELAY_MS = 5000; + readonly LATENCY_SMOOTH_FACTOR = 0.5; + constructor() { const controls = {}; @@ -40,6 +58,8 @@ export class RightSidebarComponent implements OnInit { } ngOnInit() { + this.updateLatency(); + this.latencyInterval = setInterval(() => this.updateLatency(), this.LATENCY_MEASURE_DELAY_MS); } saveSettings() { @@ -69,4 +89,20 @@ export class RightSidebarComponent implements OnInit { } this._RsToRa.toggle(); } + + private updateLatency() { + this._crud.measureLatency().subscribe(latency => { + this.latency.update(lastLatency => { + if (latency < 0) { + return null; + } + return lastLatency === null ? latency : + this.LATENCY_SMOOTH_FACTOR * lastLatency + (1 - this.LATENCY_SMOOTH_FACTOR) * latency; + }); + }); + } + + ngOnDestroy(): void { + clearInterval(this.latencyInterval); + } } diff --git a/src/app/containers/default-layout/default-layout.component.html b/src/app/containers/default-layout/default-layout.component.html index 9b4f7cfb..141404fd 100644 --- a/src/app/containers/default-layout/default-layout.component.html +++ b/src/app/containers/default-layout/default-layout.component.html @@ -148,17 +148,20 @@
    - - -
    Connection Settings
    - -     - - - - -     +@if (modal()) { + + + +
    UI Settings
    + +     + + + + +     +} diff --git a/src/app/services/crud.service.ts b/src/app/services/crud.service.ts index 7c5365a8..77c42355 100644 --- a/src/app/services/crud.service.ts +++ b/src/app/services/crud.service.ts @@ -1,27 +1,20 @@ import {EventEmitter, inject, Injectable} from '@angular/core'; import {HttpClient, HttpHeaders} from '@angular/common/http'; import {WebuiSettingsService} from './webui-settings.service'; -import {EntityMeta, IndexModel, ModifyPartitionRequest, PartitionFunctionModel, PartitioningRequest, PathAccessRequest, PlacementFieldsModel, - RelationalResult -} from '../components/data-view/models/result-set.model'; +import {EntityMeta, IndexModel, ModifyPartitionRequest, PartitionFunctionModel, PartitioningRequest, PathAccessRequest, PlacementFieldsModel, RelationalResult} from '../components/data-view/models/result-set.model'; import {webSocket} from 'rxjs/webSocket'; import {ColumnRequest, ConstraintRequest, DataModel, DeleteRequest, EditCollectionRequest, EditTableRequest, EntityRequest, ExploreTable, GraphRequest, MaterializedRequest, Method, MonitoringRequest, Namespace, PolyAlgRequest, QueryRequest, StatisticRequest} from '../models/ui-request.model'; -import {AutoDockerResult, AutoDockerStatus, CreateDockerResponse, - DockerInstanceInfo, - DockerSettings, - HandshakeInfo, - InstancesAndAutoDocker, - UpdateDockerResponse -} from '../models/docker.model'; +import {AutoDockerResult, AutoDockerStatus, CreateDockerResponse, DockerInstanceInfo, DockerSettings, HandshakeInfo, InstancesAndAutoDocker, UpdateDockerResponse} from '../models/docker.model'; import {ForeignKey, Uml} from '../views/uml/uml.model'; import {Validators} from '@angular/forms'; import {AdapterModel} from '../views/adapters/adapter.model'; import {QueryInterface, QueryInterfaceTemplate} from '../views/query-interfaces/query-interfaces.model'; import {WebSocket} from './webSocket'; -import {Observable} from 'rxjs'; +import {catchError, Observable, of, timeout} from 'rxjs'; import {PolyAlgRegistry} from '../components/polyalg/models/polyalg-registry'; import {PlanNode} from '../components/polyalg/models/polyalg-plan.model'; import {PlanType} from '../models/information-page.model'; +import {map} from 'rxjs/operators'; @Injectable({ @@ -711,4 +704,17 @@ export class CrudService { return this._http.post(`${this.httpUrl}/loadPlugins`, formData); } + isReady() { + return this._http.get(`${this.httpUrl}/isReady`); + } + + measureLatency(): Observable { + const start = performance.now(); + return this.isReady().pipe( + timeout(5000), + map(() => performance.now() - start), + catchError(() => of(-1)) + ); + } + } diff --git a/src/app/services/webui-settings.service.ts b/src/app/services/webui-settings.service.ts index 1421d62a..37ca8d10 100644 --- a/src/app/services/webui-settings.service.ts +++ b/src/app/services/webui-settings.service.ts @@ -15,11 +15,11 @@ export class WebuiSettingsService { // tslint:disable:no-unused-expression - new Setting(this.settings, 'host', 'localhost'); - new Setting(this.settings, 'webUI.port', '7659'); - new Setting(this.settings, 'config.prefix', 'config'); - new Setting(this.settings, 'information.prefix', 'info'); - new Setting(this.settings, 'reconnection.timeout', '500'); + new Setting(this.settings, 'host', 'localhost', true, 'Host'); + new Setting(this.settings, 'webUI.port', '7659', true, 'Port'); + new Setting(this.settings, 'config.prefix', 'config', false); + new Setting(this.settings, 'information.prefix', 'info', false); + new Setting(this.settings, 'reconnection.timeout', '500', true, 'Reconnection Timeout'); this.host = localStorage.getItem('host'); @@ -53,8 +53,12 @@ export class WebuiSettingsService { return this.connections.get(key); } - public getSettings() { - return this.settings; + public getConfigurableSettings() { + return new Map( + Array.from(this.settings.entries()).filter( + ([_, value]) => value.configurable + ) + ); } @@ -90,11 +94,15 @@ export class Setting { key: string; value: string; default: string; + configurable: boolean; // if true, the user can change the value of this setting from the right sidebar + displayName: string; order: number; - constructor(map: Map, key: string, defaultValue: string, order = 1) { + constructor(map: Map, key: string, defaultValue: string, configurable: boolean, displayName: string = null, order = 1) { this.key = key; this.default = defaultValue; + this.configurable = configurable; + this.displayName = displayName === null ? key : displayName; if (localStorage.getItem(key) === null) { this.value = defaultValue; localStorage.setItem(key, defaultValue); From c0174bcb1dfb98e07cfc27b0ffc7bcca696011ac Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Wed, 30 Jul 2025 15:05:39 +0200 Subject: [PATCH 06/34] Various spacing improvements, show notebooks in full width --- .../breadcrumb/breadcrumb.component.html | 6 +-- .../breadcrumb/breadcrumb.component.scss | 4 -- .../breadcrumb/breadcrumb.component.ts | 2 +- .../left-sidebar/left-sidebar.component.html | 2 +- .../default-layout.component.html | 4 +- .../edit-notebook.component.html | 46 ++++++++--------- .../edit-notebook.component.scss | 25 +++++++--- .../manage-notebook.component.html | 49 ++++++++++--------- .../notebooks-dashboard.component.html | 2 +- .../components/notebooks.component.html | 39 +++++++++------ .../workflow-viewer.component.html | 2 +- .../views/adapters/adapters.component.html | 13 +++-- .../dockerconfig/dockerconfig.component.html | 2 +- .../querying/console/console.component.ts | 5 -- src/app/views/views-routing.module.ts | 3 +- 15 files changed, 109 insertions(+), 95 deletions(-) diff --git a/src/app/components/breadcrumb/breadcrumb.component.html b/src/app/components/breadcrumb/breadcrumb.component.html index ffd67f3a..28bc536f 100644 --- a/src/app/components/breadcrumb/breadcrumb.component.html +++ b/src/app/components/breadcrumb/breadcrumb.component.html @@ -1,5 +1,5 @@ -
    - +
    + Statistics -
    @@ -35,4 +34,3 @@
    -
    diff --git a/src/app/components/breadcrumb/breadcrumb.component.scss b/src/app/components/breadcrumb/breadcrumb.component.scss index 13833f41..0c8e8af1 100644 --- a/src/app/components/breadcrumb/breadcrumb.component.scss +++ b/src/app/components/breadcrumb/breadcrumb.component.scss @@ -1,6 +1,5 @@ #zoom-wrapper { margin: 0; - height: 3.3em; justify-content: flex-end; padding: 0.35em 1em 0.35em 0.35em; } @@ -11,14 +10,11 @@ #statistics-wrapper { margin: 0; - height: 3.3em; justify-content: flex-end; - padding: 0.35em 1em 0.35em 0.35em; } .breadcrumb-menu-right { margin: 0; - height: 3.3em; justify-content: flex-end; padding: 0.35em 1em 0.35em 0.35em; } diff --git a/src/app/components/breadcrumb/breadcrumb.component.ts b/src/app/components/breadcrumb/breadcrumb.component.ts index 9efe18ae..3ff82a61 100644 --- a/src/app/components/breadcrumb/breadcrumb.component.ts +++ b/src/app/components/breadcrumb/breadcrumb.component.ts @@ -14,7 +14,7 @@ export class BreadcrumbComponent implements OnInit { routerId; - private readonly _breadcrumb = inject(BreadcrumbService); + readonly _breadcrumb = inject(BreadcrumbService); constructor() { } diff --git a/src/app/components/left-sidebar/left-sidebar.component.html b/src/app/components/left-sidebar/left-sidebar.component.html index 964538be..36c0ca0d 100644 --- a/src/app/components/left-sidebar/left-sidebar.component.html +++ b/src/app/components/left-sidebar/left-sidebar.component.html @@ -24,7 +24,7 @@ *ngIf="this._catalog.state() !== CatalogState.UP_TO_DATE">
    - + @@ -144,7 +144,7 @@
    - + {{ session.kernel.name }} +
    -

    Status: {{selectedSession.kernel.execution_state}}

    -

    Last Activity: {{selectedSession.kernel.last_activity | date: 'yyyy-MM-dd HH:mm:SS'}}

    -

    Connections: {{selectedSession.kernel.connections}}

    +

    Status: {{ selectedSession.kernel.execution_state }}

    +

    Last Activity: {{ selectedSession.kernel.last_activity | date: 'yyyy-MM-dd HH:mm:SS' }}

    +

    Connections: {{ selectedSession.kernel.connections }}
    @@ -154,14 +155,15 @@

    Connect to Kernel

    -

    Status: {{selectedSession.kernel.execution_state}}

    -

    Last Activity: {{selectedSession.kernel.last_activity | date: 'yyyy-MM-dd HH:mm:SS'}}

    -

    Connections: {{selectedSession.kernel.connections}}

    +

    Status: {{ selectedSession.kernel.execution_state }}

    +

    Last Activity: {{ selectedSession.kernel.last_activity | date: 'yyyy-MM-dd HH:mm:SS' }}

    +

    Connections: {{ selectedSession.kernel.connections }}
    @@ -193,11 +195,12 @@

    Create Kernel

    -

    Language: {{createKernelForm.get('kernel').value}}

    +

    Language: {{ createKernelForm.get( 'kernel' ).value }}

    diff --git a/src/app/plugins/notebooks/components/notebooks-dashboard/notebooks-dashboard.component.html b/src/app/plugins/notebooks/components/notebooks-dashboard/notebooks-dashboard.component.html index 859ce834..a43e1fa9 100644 --- a/src/app/plugins/notebooks/components/notebooks-dashboard/notebooks-dashboard.component.html +++ b/src/app/plugins/notebooks/components/notebooks-dashboard/notebooks-dashboard.component.html @@ -1,4 +1,4 @@ -
    +

    Notebooks


    diff --git a/src/app/plugins/notebooks/components/notebooks.component.html b/src/app/plugins/notebooks/components/notebooks.component.html index 4aa130d0..aed77cea 100644 --- a/src/app/plugins/notebooks/components/notebooks.component.html +++ b/src/app/plugins/notebooks/components/notebooks.component.html @@ -1,15 +1,19 @@ - +@if (editNotebookSession !== '') { + + - - - - - - - +} @else { + + @if (_content.isRoot) { + + } @else { + + } + +}