diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html index dcd78dc9180..14d6ee6bacc 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html @@ -12,7 +12,7 @@ - {{displayName}} + {{displayName}} data.get('paragraph')) + ) + .subscribe(id => { + this.onParagraphSelect(id); + this.onParagraphScrolled(id); + }); this.activatedRoute.params .pipe( takeUntil(this.destroy$), diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts index ad9691e9ab6..3afdea13f6d 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/paragraph/paragraph.component.ts @@ -11,6 +11,7 @@ */ import { + AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -62,7 +63,7 @@ type Mode = 'edit' | 'command'; }, changeDetection: ChangeDetectionStrategy.OnPush }) -export class NotebookParagraphComponent extends ParagraphBase implements OnInit, OnChanges, OnDestroy { +export class NotebookParagraphComponent extends ParagraphBase implements OnInit, OnChanges, OnDestroy, AfterViewInit { @ViewChild(NotebookParagraphCodeEditorComponent, { static: false }) notebookParagraphCodeEditorComponent: NotebookParagraphCodeEditorComponent; @ViewChildren(NotebookParagraphResultComponent) notebookParagraphResultComponents: QueryList< @@ -73,6 +74,7 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit, @Input() looknfeel: string; @Input() revisionView: boolean; @Input() select: boolean = false; + @Input() scrolled: boolean = false; @Input() index: number = -1; @Input() viewOnly: boolean; @Input() last: boolean; @@ -608,25 +610,36 @@ export class NotebookParagraphComponent extends ParagraphBase implements OnInit, }); } + scrollIfNeeded(): void { + if (this.scrolled && this.host.nativeElement) { + setTimeout(() => { + this.host.nativeElement.scrollIntoView(); + }); + } + } ngOnChanges(changes: SimpleChanges): void { - const { index, select } = changes; + const { index, select, scrolled } = changes; if ( (index && index.currentValue !== index.previousValue && this.select) || (select && select.currentValue === true && select.previousValue !== true) ) { - if (this.host.nativeElement) { - setTimeout(() => { - if (this.mode === 'command') { - (this.host.nativeElement as HTMLElement).focus(); - } - }); - } + setTimeout(() => { + if (this.mode === 'command' && this.host.nativeElement) { + (this.host.nativeElement as HTMLElement).focus(); + } + }); + } + if (scrolled) { + this.scrollIfNeeded(); } } getElement(): HTMLElement { return this.host && this.host.nativeElement; } + ngAfterViewInit(): void { + this.scrollIfNeeded(); + } ngOnDestroy(): void { super.ngOnDestroy();