Feature: Nested Tags (#10833)

--------- Co-authored-by: Trenton H <797416+stumpylog@users.noreply.github.com>
2025-09-28 01:22:41 -05:00 · 2025-09-17 14:41:39 -07:00
parent 4b32c3228e
commit 4cff907ba0
44 changed files with 1140 additions and 118 deletions
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
@@ -12,6 +12,8 @@

    <pngx-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></pngx-input-color>

+    <pngx-input-select i18n-title title="Parent" formControlName="parent" [items]="tags" [allowNull]="true" [error]="error?.parent"></pngx-input-select>
+
    <pngx-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></pngx-input-check>
    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
    @if (patternRequired) {
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts
@@ -35,11 +35,16 @@ import { TextComponent } from '../../input/text/text.component'
  ],
 })
 export class TagEditDialogComponent extends EditDialogComponent<Tag> {
+  tags: Tag[]
+
  constructor() {
    super()
    this.service = inject(TagService)
    this.userService = inject(UserService)
    this.settingsService = inject(SettingsService)
+    this.service.listAll().subscribe((result) => {
+      this.tags = result.results
+    })
  }

  getCreateTitle() {
@@ -55,6 +60,7 @@ export class TagEditDialogComponent extends EditDialogComponent<Tag> {
      name: new FormControl(''),
      color: new FormControl(randomColor()),
      is_inbox_tag: new FormControl(false),
+      parent: new FormControl(null),
      matching_algorithm: new FormControl(DEFAULT_MATCHING_ALGORITHM),
      match: new FormControl(''),
      is_insensitive: new FormControl(true),
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -114,6 +114,13 @@ export class FilterableDropdownSelectionModel {
          b.id == NEGATIVE_NULL_FILTER_VALUE)
      ) {
        return 1
+      }
+
+      // Preserve hierarchical order when provided (e.g., Tags)
+      const ao = (a as any)['orderIndex']
+      const bo = (b as any)['orderIndex']
+      if (ao !== undefined && bo !== undefined) {
+        return ao - bo
      } else if (
        this.getNonTemporary(a.id) == ToggleableItemState.NotSelected &&
        this.getNonTemporary(b.id) != ToggleableItemState.NotSelected
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
@@ -15,12 +15,17 @@
      <i-bs width="1em" height="1em" name="x"></i-bs>
    }
  </div>
-  <div class="me-1">
-    @if (isTag) {
-      <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
-    } @else {
-      <small>{{item.name}}</small>
+  <div class="me-1 name-cell" [style.--depth]="isTag ? getDepth() + 1 : 1">
+    @if (isTag && getDepth() > 0) {
+      <div class="indicator"></div>
    }
+    <div>
+      @if (isTag) {
+        <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
+      } @else {
+        <small>{{item.name}}</small>
+      }
+    </div>
  </div>
  @if (!hideCount) {
    <div class="badge bg-light text-dark rounded-pill ms-auto me-1">{{currentCount}}</div>
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
@@ -2,3 +2,19 @@
  min-width: 1em;
  min-height: 1em;
 }
+
+.name-cell {
+  padding-left: calc(calc(var(--depth) - 2) * 1rem);
+  display: flex;
+  align-items: center;
+
+  .indicator {
+    display: inline-block;
+    width: .8rem;
+    height: .8rem;
+    border-left: 1px solid var(--bs-secondary);
+    border-bottom: 1px solid var(--bs-secondary);
+    margin-right: .25rem;
+    margin-left: .5rem;
+  }
+}
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { MatchingModel } from 'src/app/data/matching-model'
+import { Tag } from 'src/app/data/tag'
 import { TagComponent } from '../../tag/tag.component'

 export enum ToggleableItemState {
@@ -45,6 +46,10 @@ export class ToggleableDropdownButtonComponent {
    return 'is_inbox_tag' in this.item
  }

+  getDepth(): number {
+    return (this.item as Tag).depth ?? 0
+  }
+
  get currentCount(): number {
    return this.count ?? this.item.document_count
  }
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -7,13 +7,14 @@
      <div class="input-group flex-nowrap">
        <ng-select #tagSelect name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
          [disabled]="disabled"
-          [multiple]="true"
+          [multiple]="multiple"
          [closeOnSelect]="false"
          [clearSearchOnAdd]="true"
          [hideSelected]="tags.length > 0"
          [addTag]="allowCreate ? createTagRef : false"
          addTagText="Add tag"
          i18n-addTagText
+          (add)="onAdd($event)"
          (change)="onChange(value)">

          <ng-template ng-label-tmp let-item="item">
@@ -25,9 +26,20 @@
            </button>
          </ng-template>
          <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
-            <div class="tag-wrap">
+            <div class="tag-option-row d-flex align-items-center">
              @if (item.id && tags) {
-                <pngx-tag class="me-2" [tag]="getTag(item.id)"></pngx-tag>
+                @if (getTag(item.id)?.parent) {
+                  <i-bs name="list-nested" class="me-1"></i-bs>
+                  <span class="hierarchy-reveal d-flex align-items-center">
+                    <span class="parents d-flex align-items-center">
+                      @for (p of getParentChain(item.id); track p.id) {
+                        <span class="badge me-1" [style.background]="p.color" [style.color]="p.text_color">{{p.name}}</span>
+                        <i-bs name="chevron-right" width=".8em" height=".8em" class="me-1"></i-bs>
+                      }
+                    </span>
+                  </span>
+                }
+                <pngx-tag class="current-tag d-flex" [tag]="getTag(item.id)"></pngx-tag>
              }
            </div>
          </ng-template>
--- a/src-ui/src/app/components/common/input/tags/tags.component.scss
+++ b/src-ui/src/app/components/common/input/tags/tags.component.scss
@@ -20,3 +20,33 @@
      }
  }
 }
+
+// Dropdown hierarchy reveal for ng-select options
+::ng-deep .ng-dropdown-panel .ng-option {
+  overflow-x: scroll;
+
+  .tag-option-row {
+    font-size: 1rem;
+    width: max-content;
+  }
+
+  .hierarchy-reveal {
+    overflow: hidden;
+    max-width: 0;
+    transition: max-width 200ms ease;
+  }
+
+  .parents .badge {
+    white-space: nowrap;
+  }
+}
+
+::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
+  max-width: 1000px;
+}
+
+::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-indicator,
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
+  background: transparent;
+}
--- a/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
@@ -177,4 +177,59 @@ describe('TagsComponent', () => {
    component.onFilterDocuments()
    expect(emitSpy).toHaveBeenCalledWith([tags[2]])
  })
+
+  it('should remove all descendants from selection', () => {
+    const c: Tag = { id: 4, name: 'c' }
+    const b: Tag = { id: 3, name: 'b', children: [c] }
+    const a: Tag = { id: 2, name: 'a' }
+    const root: Tag = { id: 1, name: 'root', children: [a, b] }
+
+    const inputIDs = [2, 3, 4, 99]
+    const result = (component as any).removeChildren(inputIDs, root)
+    expect(result).toEqual([99])
+  })
+
+  it('should append all parents recursively', () => {
+    const root: Tag = { id: 1, name: 'root' }
+    const mid: Tag = { id: 2, name: 'mid', parent: 1 }
+    const leaf: Tag = { id: 3, name: 'leaf', parent: 2 }
+    component.tags = [root, mid, leaf]
+
+    component.value = []
+    component.onAdd(leaf)
+    expect(component.value).toEqual([2, 1])
+
+    // Calling onAdd on a root should not change value
+    component.onAdd(root)
+    expect(component.value).toEqual([2, 1])
+  })
+
+  it('should return ancestors from root to parent using getParentChain', () => {
+    const root: Tag = { id: 1, name: 'root' }
+    const mid: Tag = { id: 2, name: 'mid', parent: 1 }
+    const leaf: Tag = { id: 3, name: 'leaf', parent: 2 }
+    component.tags = [root, mid, leaf]
+
+    expect(component.getParentChain(3).map((t) => t.id)).toEqual([1, 2])
+    expect(component.getParentChain(2).map((t) => t.id)).toEqual([1])
+    expect(component.getParentChain(1).map((t) => t.id)).toEqual([])
+    // Non-existent id
+    expect(component.getParentChain(999).map((t) => t.id)).toEqual([])
+  })
+
+  it('should handle cyclic parents via guard in getParentChain', () => {
+    const one: Tag = { id: 1, name: 'one', parent: 2 }
+    const two: Tag = { id: 2, name: 'two', parent: 1 }
+    component.tags = [one, two]
+
+    const chain = component.getParentChain(1)
+    // Guard avoids infinite loop; chain contains both nodes once
+    expect(chain.map((t) => t.id)).toEqual([1, 2])
+  })
+
+  it('should stop when parent does not exist in getParentChain', () => {
+    const lone: Tag = { id: 5, name: 'lone', parent: 999 }
+    component.tags = [lone]
+    expect(component.getParentChain(5)).toEqual([])
+  })
 })
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -100,6 +100,9 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
  @Input()
  horizontal: boolean = false

+  @Input()
+  multiple: boolean = true
+
  @Output()
  filterDocuments = new EventEmitter<Tag[]>()

@@ -124,13 +127,40 @@ export class TagsComponent implements OnInit, ControlValueAccessor {

    let index = this.value.indexOf(tagID)
    if (index > -1) {
+      const tag = this.getTag(tagID)
+
+      // remove tag
      let oldValue = this.value
      oldValue.splice(index, 1)
+
+      // remove children
+      oldValue = this.removeChildren(oldValue, tag)
+
      this.value = [...oldValue]
      this.onChange(this.value)
    }
  }

+  private removeChildren(tagIDs: number[], tag: Tag) {
+    if (tag.children?.length) {
+      const childIDs = tag.children.map((child) => child.id)
+      tagIDs = tagIDs.filter((id) => !childIDs.includes(id))
+      for (const child of tag.children) {
+        tagIDs = this.removeChildren(tagIDs, child)
+      }
+    }
+    return tagIDs
+  }
+
+  public onAdd(tag: Tag) {
+    if (tag.parent) {
+      // add all parents recursively
+      const parent = this.getTag(tag.parent)
+      this.value = [...this.value, parent.id]
+      this.onAdd(parent)
+    }
+  }
+
  createTag(name: string = null, add: boolean = false) {
    var modal = this.modalService.open(TagEditDialogComponent, {
      backdrop: 'static',
@@ -166,6 +196,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {

  addTag(id) {
    this.value = [...this.value, id]
+    this.onAdd(this.getTag(id))
    this.onChange(this.value)
  }

@@ -180,4 +211,20 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
      this.tags.filter((t) => this.value.includes(t.id))
    )
  }
+
+  getParentChain(id: number): Tag[] {
+    // Returns ancestors from root → immediate parent for a tag id
+    const chain: Tag[] = []
+    let current = this.getTag(id)
+    const guard = new Set<number>()
+    while (current?.parent) {
+      if (guard.has(current.parent)) break
+      guard.add(current.parent)
+      const parent = this.getTag(current.parent)
+      if (!parent) break
+      chain.unshift(parent)
+      current = parent
+    }
+    return chain
+  }
 }
--- a/src-ui/src/app/components/common/tag/tag.component.html
+++ b/src-ui/src/app/components/common/tag/tag.component.html
@@ -1,4 +1,8 @@
@if (tag) {
+  @if (showParents && tag.parent) {
+    <pngx-tag [tagID]="tag.parent" [clickable]="clickable" [linkTitle]="linkTitle"></pngx-tag>
+      &nbsp;&gt;&nbsp;
+  }
  @if (!clickable) {
    <span class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</span>
  }
--- a/src-ui/src/app/components/common/tag/tag.component.ts
+++ b/src-ui/src/app/components/common/tag/tag.component.ts
@@ -50,4 +50,7 @@ export class TagComponent {

  @Input()
  clickable: boolean = false
+
+  @Input()
+  showParents: boolean = false
 }