Schema tool window

src/framework/scroll-container/detect-scroll.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, HostBinding, HostListener } from "@angular/core";
+
+@Directive({
+    selector: "[detectScroll]"
+})
+export class DetectScrollDirective {
+    @HostBinding("class.scrolled") scrolled = false;
+
+    @HostListener("scroll", ["$event.target"]) onScroll(target: any) {
+        this.scrolled = target.scrollTop > 0;
+    }
+}

src/framework/typedb-driver/response.ts

@@ -69,6 +69,8 @@ export interface ConceptDocumentsQueryResponse extends QueryResponseBase {
 
 export type QueryResponse = OkQueryResponse | ConceptRowsQueryResponse | ConceptDocumentsQueryResponse;
 
+export type ApiOkResponse<OK_RES = {}> = { ok: OK_RES };
+
 export type ApiError = { code: string; message: string };
 
 export interface ApiErrorResponse {
@@ -80,9 +82,9 @@ export function isApiError(err: any): err is ApiError {
     return typeof err.code === "string" && typeof err.message === "string";
 }
 
-export type ApiResponse<OK_RES = {} | null> = { ok: OK_RES } | ApiErrorResponse;
+export type ApiResponse<OK_RES = {} | null> = ApiOkResponse<OK_RES> | ApiErrorResponse;
 
-export function isOkResponse<OK_RES>(res: ApiResponse<OK_RES>): res is { ok: OK_RES } {
+export function isOkResponse<OK_RES>(res: ApiResponse<OK_RES>): res is ApiOkResponse<OK_RES> {
     return "ok" in res;
 }
 

src/module/query/query-tool.component.html

@@ -1,52 +1,35 @@
 <ts-page-scaffold pageAvailability="ready">
   <article #articleRef class="query-page" style="display: flex; flex-direction: row;">
-    <div resizable [percent]="30" class="history-pane card">
-      <div class="card-header">
-        <i class="fa-light fa-notebook"></i>
-        <h4>History</h4>
+    <div resizable [percent]="20" class="schema-pane card">
+      <div class="card-header-wrapper">
+        <div class="card-header">
+          <i class="fa-light fa-vector-square"></i>
+          <h4>Schema</h4>
+        </div>
       </div>
-      <div class="history-container">
-        <ol>
-          @for (entry of state.history.entries; track entry) {
-            <li class="history-entry">
-              <aside class="text-muted">
-                <time>{{ entry.startedAtTimestamp | date:'shortTime' }}</time>
-                <span class="bullet">•</span>
-                @if (isTransactionOperation(entry)) {
-                   <p class="transaction-operation-type">{{ transactionOperationString(entry) }}</p>
-                } @else {
-                  <p class="transaction-operation-type">ran query</p>
-                }
-                <span class="flex-spacer"></span>
-                <div class="action-status">
-                  @if (entry.status === "pending") {
-                    <tp-spinner [size]="14"/>
-                  } @else {
-                      <span>{{ actionDurationString(entry) }}</span>
-                      @if (entry.status === "success") {
-                        <i class="fa-light fa-check"></i>
-                      } @else {
-                        <i class="fa-light fa-xmark" richTooltip [richTooltipContent]="historyEntryErrorTooltip(entry)" (click)="copyHistoryEntryErrorTooltip(entry)"></i>
-                      }
-                  }
-                </div>
-              </aside>
-              @if (isQueryRun(entry)) {
-                <mat-form-field>
-                  <textarea [value]="queryHistoryPreview(entry.query)" readonly matInput
-                            cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1" cdkAutosizeMaxRows="3">
-                  </textarea>
-                </mat-form-field>
-              }
-<!--              @if (!$last && isTransactionOperation(entry) && entry.transactionOperation.operationType === "close") {-->
-<!--                <mat-divider/>-->
-<!--              }-->
-            </li>
-          }
-        </ol>
+      <div class="schema-container" detectScroll>
+        <div class="gutter"></div>
+        <mat-tree #tree [dataSource]="state.schemaWindow.dataSource" [childrenAccessor]="state.schemaWindow.childrenAccessor">
+          <!-- This is the tree node template for leaf nodes -->
+          <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+            <!-- use a disabled button to provide padding for tree leaf -->
+            <button matIconButton disabled></button>
+            <ts-schema-tree-node [data]="node"/>
+          </mat-tree-node>
+          <!-- This is the tree node template for expandable nodes -->
+          <mat-tree-node *matTreeNodeDef="let node;when: state.schemaWindow.hasChild" matTreeNodePadding matTreeNodeToggle [cdkTreeNodeTypeaheadLabel]="node.name">
+            <button matIconButton matTreeNodeToggle aria-label="Toggle node">
+              <mat-icon class="mat-icon-rtl-mirror">
+                {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+              </mat-icon>
+            </button>
+            <ts-schema-tree-node [data]="node"/>
+          </mat-tree-node>
+        </mat-tree>
+        <div class="gutter"></div>
       </div>
     </div>
-    <div class="main-panes" resizable [percent]="70" style="display: flex; flex-direction: column;">
+    <div class="main-panes" resizable [percent]="60" style="display: flex; flex-direction: column;">
       <div resizable [percent]="40" class="query-pane card">
         <div class="card-header">
           <i class="fa-light fa-code"></i>
@@ -154,5 +137,48 @@ <h4>Output</h4>
         }
       </div>
     </div>
+    <div resizable [percent]="20" class="history-pane card">
+      <div class="card-header">
+        <i class="fa-light fa-notebook"></i>
+        <h4>History</h4>
+      </div>
+      <div class="history-container">
+        <ol>
+          @for (entry of state.history.entries; track entry) {
+            <li class="history-entry">
+              <aside class="text-muted">
+                <time>{{ entry.startedAtTimestamp | date:'shortTime' }}</time>
+                <span class="bullet">•</span>
+                @if (isTransactionOperation(entry)) {
+                  <p class="transaction-operation-type">{{ transactionOperationString(entry) }}</p>
+                } @else {
+                  <p class="transaction-operation-type">ran query</p>
+                }
+                <span class="flex-spacer"></span>
+                <div class="action-status">
+                  @if (entry.status === "pending") {
+                    <tp-spinner [size]="14"/>
+                  } @else {
+                    <span>{{ actionDurationString(entry) }}</span>
+                    @if (entry.status === "success") {
+                      <i class="fa-light fa-check"></i>
+                    } @else {
+                      <i class="fa-light fa-xmark" richTooltip [richTooltipContent]="historyEntryErrorTooltip(entry)" (click)="copyHistoryEntryErrorTooltip(entry)"></i>
+                    }
+                  }
+                </div>
+              </aside>
+              @if (isQueryRun(entry)) {
+                <mat-form-field>
+                  <textarea class="history-query-text" [value]="queryHistoryPreview(entry.query)" readonly matInput
+                            cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1" cdkAutosizeMaxRows="3">
+                  </textarea>
+                </mat-form-field>
+              }
+            </li>
+          }
+        </ol>
+      </div>
+    </div>
   </article>
 </ts-page-scaffold>

src/module/query/query-tool.component.scss

@@ -10,23 +10,8 @@
 @use "typography";
 @use "shapes";
 
-:host {
-    height: 100%;
-}
-
-.query-page-rough {
-    height: 100%;
-    margin-top: 16px;
-    margin-bottom: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
 .query-page {
-    height: 100%;
-    margin-top: 16px;
-    margin-bottom: 16px;
+    height: calc(100% - 86px);
     gap: 4px !important;
 
     ::ng-deep app-drag-handle span {
@@ -66,6 +51,18 @@
     @include shapes.light-source-gradient(primary.$purple, primary.$deep-purple);
     transition: background 0.1s linear;
     padding: 16px;
+
+    &:has(.card-header-wrapper) {
+        padding: 0;
+    }
+}
+
+.card-header-wrapper {
+    padding: 16px;
+
+    .card-header {
+        margin-bottom: 0;
+    }
 }
 
 .card-header {
@@ -76,6 +73,67 @@
     height: 32px;
 }
 
+.schema-pane {
+    display: flex;
+    flex-direction: column;
+}
+
+.schema-container {
+    display: flex;
+    overflow: auto;
+    scrollbar-gutter: stable;
+    overscroll-behavior: contain;
+
+    .gutter {
+        flex: 0 0 16px;
+    }
+
+    &.scrolled {
+        border-top: 1px solid primary.$black-purple;
+    }
+
+    mat-tree {
+        padding: 0;
+        box-sizing: border-box;
+        height: 100%;
+        margin: 0;
+
+        .mat-mdc-icon-button {
+            margin: 0;
+            padding: 0;
+            width: 1em;
+            height: 1em;
+        }
+
+        mat-tree-node[aria-level="3"] {
+            margin-left: 32px;
+            padding-left: 8px !important; /* overrides inline style from Angular Material */
+            padding-right: 8px;
+            align-items: stretch;
+            border-bottom: 1px solid primary.$light-purple;
+            border-left: 1px solid primary.$light-purple;
+            border-right: 1px solid primary.$light-purple;
+            font-weight: typography.$thin;
+
+            button {
+                display: none;
+            }
+
+            &:nth-child(odd) {
+                background: primary.$black-purple;
+            }
+
+            &:nth-child(even) {
+                background: primary.$purple;
+            }
+        }
+
+        mat-tree-node[aria-level="2"] + mat-tree-node[aria-level="3"] {
+            border-top: 1px solid primary.$light-purple;
+        }
+    }
+}
+
 mat-form-field {
     width: 100%;
 }

src/module/query/query-tool.component.ts

@@ -12,32 +12,36 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
 import { MatDividerModule } from "@angular/material/divider";
 import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
 import { MatInputModule } from "@angular/material/input";
 import { MatSortModule } from "@angular/material/sort";
 import { MatTableModule } from "@angular/material/table";
+import { MatTreeModule } from "@angular/material/tree";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { RouterLink } from "@angular/router";
 import { ResizableDirective } from "@hhangular/resizable";
 import { distinctUntilChanged, filter, first, map, startWith } from "rxjs";
 import { otherExampleLinter, TypeQL } from "../../framework/codemirror-lang-typeql";
 import { DriverAction, TransactionOperationAction, isQueryRun, isTransactionOperation } from "../../concept/action";
 import { basicDark } from "../../framework/code-editor/theme";
+import { DetectScrollDirective } from "../../framework/scroll-container/detect-scroll.directive";
 import { SpinnerComponent } from "../../framework/spinner/spinner.component";
 import { RichTooltipDirective } from "../../framework/tooltip/rich-tooltip.directive";
 import { AppData } from "../../service/app-data.service";
 import { DriverState } from "../../service/driver-state.service";
 import { QueryToolState } from "../../service/query-tool-state.service";
 import { SnackbarService } from "../../service/snackbar.service";
 import { PageScaffoldComponent } from "../scaffold/page/page-scaffold.component";
+import { SchemaTreeNodeComponent } from "./schema-tree-node/schema-tree-node.component";
 
 @Component({
     selector: "ts-query-tool",
     templateUrl: "query-tool.component.html",
     styleUrls: ["query-tool.component.scss"],
     imports: [
-        RouterLink, AsyncPipe, PageScaffoldComponent, MatDividerModule, MatFormFieldModule,
+        RouterLink, AsyncPipe, PageScaffoldComponent, MatDividerModule, MatFormFieldModule, MatTreeModule, MatIconModule,
         MatInputModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, CodeEditor, ResizableDirective,
-        DatePipe, SpinnerComponent, MatTableModule, MatSortModule, MatTooltipModule, MatButtonModule, RichTooltipDirective,
+        DatePipe, SpinnerComponent, MatTableModule, MatSortModule, MatTooltipModule, MatButtonModule, RichTooltipDirective, SchemaTreeNodeComponent, DetectScrollDirective,
     ]
 })
 export class QueryToolComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -49,8 +53,10 @@ export class QueryToolComponent implements OnInit, AfterViewInit, OnDestroy {
     readonly codeEditorTheme = basicDark;
     codeEditorHidden = true;
 
-    constructor(protected state: QueryToolState, public driver: DriverState, private appData: AppData, private snackbar: SnackbarService) {
-    }
+    constructor(
+        protected state: QueryToolState, public driver: DriverState,
+        private appData: AppData, private snackbar: SnackbarService
+    ) {}
 
     ngOnInit() {
         this.appData.viewState.setLastUsedTool("query");
@@ -67,6 +73,7 @@ export class QueryToolComponent implements OnInit, AfterViewInit, OnDestroy {
     ngAfterViewInit() {
         const articleWidth = this.articleRef.nativeElement.clientWidth;
         this.resizables.first.percent = (articleWidth * 0.15 + 100) / articleWidth * 100;
+        this.resizables.last.percent = (articleWidth * 0.15 + 100) / articleWidth * 100;
         this.graphViewRef.changes.pipe(
             map(x => x as QueryList<ElementRef<HTMLElement>>),
             startWith(this.graphViewRef),

src/module/query/schema-tree-node/schema-tree-node.component.html

@@ -0,0 +1,24 @@
+@switch (data.nodeKind) {
+  @case ("root") {
+    {{ data.label }}
+  }
+  @case ("concept") {
+    {{ data.concept.label }}@if (data.concept.kind === "attributeType") {<em class="text-muted">, value {{ data.concept.valueType }}</em>}
+  }
+  @case ("link") {
+    @switch (data.linkKind) {
+      @case ("sub") {
+        <p>sub {{ data.supertype.label }}</p>
+      }
+      @case ("owns") {
+        <p>owns {{ data.ownedAttribute.label }}, value {{ data.ownedAttribute.valueType }}</p>
+      }
+      @case ("relates") {
+        <p>relates {{ data.role.label }}</p>
+      }
+      @case ("plays") {
+        <p>plays {{ data.role.label }}</p>
+      }
+    }
+  }
+}

src/module/query/schema-tree-node/schema-tree-node.component.scss

@@ -0,0 +1,5 @@
+/*!/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */

src/module/query/schema-tree-node/schema-tree-node.component.ts

@@ -0,0 +1,33 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, Input } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatSortModule } from "@angular/material/sort";
+import { MatTableModule } from "@angular/material/table";
+import { MatTreeModule } from "@angular/material/tree";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { SchemaTreeNode } from "../../../service/query-tool-state.service";
+
+@Component({
+    selector: "ts-schema-tree-node",
+    templateUrl: "schema-tree-node.component.html",
+    styleUrls: ["schema-tree-node.component.scss"],
+    imports: [
+        MatDividerModule, MatFormFieldModule, MatTreeModule, MatIconModule,
+        MatInputModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule,
+        MatTableModule, MatSortModule, MatTooltipModule, MatButtonModule,
+    ]
+})
+export class SchemaTreeNodeComponent {
+    @Input({ required: true }) data!: SchemaTreeNode;
+}